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网 页 上 使 用 动画 的 技术 技巧 ， 让 读者 掌握 如 何 有 效 利用 动画 实现 无 与 伦比 的 用 户 体验 。 具 体内 容 包 括 : 
JavaScript 动画 优势 ，Velocityjs 的 利用 ， 动 画工 作 流 ， 文 本 动画 ，SVG， 动 画 性 能 

本 书 适合 所 有 Web 开发 工程 师 和 动画 设计 师 晋 阶 学 习 。 
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开发 人 员 首次 发 现 jQuery 的 .animate() 函 数 时 是 个 特别 的 时 刻 。 我 记得 自己 一 发 现 这 个 函数 
就 尝试 给 页 面 上 任何 主 内 容 区 以 外 的 东西 都 加 上 动画 效果 。 我 实现 了 手风琴 效果 (accordion )、 
飞 出 菜单 (fly-out menu )、 悬 停 效 果 (hover effect )、 滚 动 过 渡 动 画 (scroll transition )、 神 奇 显示 
(magical reveal ) 和 视差 滚动 幻灯 片 〈parallax slider )。 这 些 动画 为 我 原本 冷冰冰 、 静 止 不 动 的 
页 面 带 来 了 动态 的 视觉 体验 , 使 我 感觉 作为 网 页 设计 师 ， 自 己 又 更 上 一 层 楼 了 。 但 这 些 只 不 过 是 
华而不实 的 把 戏 黑 了 。 时 至 今日 ， 我 意识 到 那 时 添加 的 那么 多 动画 并 没有 真正 提高 网 站 的 用 户 
体验 。 





























尽管 如 此 ， 我 当时 仍 是 激动 不 已 。 究 竞 是 什么 让 动画 如 此 激动 人 心 ? 


从 我 的 公寓 向 外 望 去 ， 可 以 看 到 布鲁克 林 市 中 心 。 我 见 到 下 面 的 街道 行人 攒 动 ; 烟 缕 从 烟 秽 
里 向 外 冒 ， 就 好 像 滚 滚 巨 浪 ; 鸽子 振动 双 翅 ， 飞 到 窗台 上 吹 息 ; 一 台 超重 机 高 高 吊 起 建筑 物 的 一 
部 分 ; 一 个 孤零零 的 心 形 气 球 升 癌 布鲁克 林 的 天 空 ( 听 上 去 有 些 老 土 ， 这 我 知道 ， 不 过 我 确实 见 
到 过 两 次 ); 汽车 在 威廉 斯 堡 大 桥 上 穿梭 ;， 头 上 云 水 轻 轻 周 过 。 




















世界 在 不 停 地 运动 。 





这 也 是 我 们 脑 中 整个 宇宙 的 运作 状态 。 事 物 在 运动 。 正 如 窗外 这 些 移动 的 事物 ， 它 们 每 个 都 
在 讲述 短 短 一 句 话 的 故事 。 然 而 它们 合 在 一 起 ， 又 在 讲述 着 一 个 更 大 的 、 正 在 发 生 的 故事 。 


















































但 是 , 数字 界面 却 不 是 这 样 运作 的 ， 它 缺少 了 那些 短 短 的 故事 。 当 事情 在 发 生变 化 时 , 得 自 
己 添补 缺漏 的 情节 。 比 如 ,点击 ATM 机 上 的 “下 一 页 ”按钮 以 后 ,屏幕 突然 改变 了 。 它 成 功 进入 
下 一 页 了 吗 ? 还 是 出 现 错误 了 ? 你 必须 重新 读 屏 并 理解 上 面 的 信息 , 才能 了 解 自己 的 行为 带 来 怎 
样 的 结果 。 这 就 造成 互动 与 互动 之 间 产 生理 解 的 空白 。 如 果 使 用 了 动 效 ,就 可 以 消除 这 种 理解 的 
空白 , 因为 动 效 自然 而 然 地 告诉 了 人 们 什么 东西 发 生 了 变化 。 这 就 好 像 在 一 种 状态 到 另 一 种 状态 
之 间 填 补 上 许多 小 故事 一 样 。 
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当 滑 动 过渡 效 果 融 你 来 到 下 一 屏 时 , 动画 帮助 你 更 好 地 理解 了 刚刚 发 生 的 事情 。 正 是 这 种 力 
量 使 动画 格外 令 人 兴奋 。 就 像 布 局 、 色 彩 和 字体 一 样 ， 动画 带 助 你 塑造 和 引导 用 户 的 体验 。 它 不 
仅仅 是 让 东西 运动 起 来 ， 更 需要 有 效 的 设计 和 精心 的 实现 。 

















不 幸 的 是 , 在 网 页 动画 的 历史 当中 ， 人 们 并 不 总 是 认为 深思 熟 虑 是 至 关 重 要 的 。 作 为 开发 人 
员 ， 我 们 用 过 各 式 各 样 的 方法 实现 动画 ， 比 如 Flash 、 动 画 GIF 、Java 小 程序 、marquee 标 签 ， 直 至 
最 近 的 CSS 、JavaScript 和 SVG。 但 是 ,那些 动画 充其量 只 不 过 是 页 面 上 的 锦上添花 ; 在 最 坏 的 情 
况 下 , 它们 甚至 沦 为 哗众取宠 的 把 戏 。 动 画 既 要 高 性 能 又 要 人 性 化 , 这 还 是 一 种 相对 较 新 的 理念 。 











































































































因此 ， 有 这 本 书 在 你 面前 是 一 件 幸 事 。Julian Shapiro 是 网 页 动画 领域 最 重要 的 专家 之 一 。 在 
编写 与 维护 Velocityjs 期 间 ， 他 积累 了 大 量 一 手 知识 ， 包 括 在 网 站 上 使 用 动 效 的 所 有 容 门 和 优势 。 
本 书 不 仅 会 带 给 你 在 网 页 上 实现 动画 的 技术 诀 窃 , 更 重要 的 是 , 它 列 含 了 对 动画 的 深刻 见解 ， 只 
有 理解 了 这 些 ， 才 能 有 效 地 利用 动画 带 来 无 与 伦比 的 用 户 体验 。 




















各 种 动画 库 和 技术 已 经 使 动 效 设计 变 得 空前 容易 。 但 并 不 是 每 一 位 开发 人 员 都 遵从 最 佳 实 
践 。 在 过 去 的 几 年 间 , 有 几 种 时 瞩 的 反 模 式 风行 一 阵 之 后 又 消失 无 踪 。 滚动 行为 被 用 来 实现 别 样 
的 用 途 。 移 动 设备 上 的 导航 被 挤 到 菜单 里 面 ， 只 有 通过 手势 才能 访问 。 尽 管 任何 偶然 知 
晓 .animate() 函 数 的 开发 人 员 都 能 轻而易举 地 添加 动画 效果 , 但 只 有 那些 能 用 其 提升 用 户 体验 的 
开发 人 员 才 可 以 称 为 真正 具有 奉献 精神 的 专业 开发 人 员 。 本 书 将 助 你 成 为 其 中 一 员 。 








David DeSandro 

2015 年 2 月 于 纽约 布鲁克 林 

David DeSandro 是 Metafizzy 的 创始 人 ， 也 是 Mansonry 和 
Isotope 这 两 款 jQuery 播 件 的 作者 /开发 人 员 
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在 网 络 刚 起 步 时 ,动画 ( animation ) 主要 是 在 开发 新 手 实在 没有 其 他 办 法 时 才 会 使 用 的 ,为 
的 是 强调 页 面 上 的 重要 部 分 以 吸引 人 们 的 注意 。 即 使 他 们 想 让 动画 突破 限制 而 发 挥 更 大 作用 , 也 
做 不 到 ， 因 为 浏览 右 ( 以 及 电脑 ) 的 速度 太 慢 ， 无 法 流畅 地 呈现 基于 网 络 的 动画 效果 。 


























我 们 从 闪烁 的 横幅 广告 、 滚 动 的 跑马 灯 新 闻 和 Flash 介 绍 视频 的 旧时 光一 路 走 来 , 取得 了 长 足 
的 发 展 。 时 至 今日 ，iOS 以 及 Android 中 叹为观止 的 动 效 设计 (motion design ) 不 仅 没 有 降低 用 户 
体验 , 反而 使 其 大 大 改善 。 最 优秀 的 网 站 和 应 用 的 开发 人 员 利用 动画 来 提升 用 户 界面 的 感觉 和 直 
觉 性 。 动画 在 设计 开发 中 的 重要 性 明显 提升 , 这 不 仅仅 是 因为 硬件 的 处 理 能 力 提 高 了 ,更 体现 了 
网 络 开 发 群体 对 于 最 佳 实践 有 了 更 深 的 理解 。 现 如 今 , 人 们 普遍 认为 最 终 用 户 体验 的 质量 比 开 发 
网 站 用 什么 工具 更 加 重要 。 当 然 ， 尽 管 这 是 个 看 似 明 显 的 结论 ， 但 事实 却 并 非 总 是 如 此 。 













































































那么 , 究竟 是 什么 偏偏 让 动画 变 得 这 么 有 用 ? 不 论 是 内 容 块 之 间 的 过 渡 效 果 、 复 杂 加 载 次 序 
的 设计 还 是 对 用 户 下 一 步 操作 的 提示 ,动画 都 是 文字 和 布局 的 有 效 补充 ,强化 了 网 站 的 预期 行为 、 
彰显 了 个 性 、 丰 富 了 视觉 体验 ,内容 究 竞 是 要 以 友好 的 方式 弹跳 出 现 呢 , 还 是 要 猛然 甩 到 屏幕 上 ? 
这 正 是 动 效 设计 研究 的 问题 。 同 时 ， 你 的 选择 将 会 决定 应 用 的 总 体感 觉 。 















































当 用 户 将 你 的 应 用 推荐 给 他 人 的 时 候 ， 他 们 经 常会 试 着 用 “ 顺 滑 ” 或 “精致 ”这 样 的 字眼 来 
形容 , 但 却 没 有 意识 到 ， 他 们 描述 的 大 多 是 界面 上 的 动 效 设 计 。 作 为 外 行人 ,他 们 没 法 明确 区 分 
应 用 和 应 用 的 动 效 设计 ， 而 这 正 是 优秀 的 用 户 界面 (UI) 设计 师 孜 孜 以 求 的 效果 : 用 动画 来 加 强 
页 面 所 要 达到 的 目标 , 但 同时 又 不 分 散 用 户 的 注意 。 






































本 书 为 你 提供 了 一 些 必 备 的 知识 。 掌 握 了 它 ， 就 可 以 自信 地 实现 动画 效果 , 不 仅 视觉 上 效果 
震撼 而 且 技 术 上 也 易于 维护 。 一 方面 要 通过 动 效 设计 丰富 页 面体 验 , 另 一 方面 又 要 避免 累 更 的 花 
哨 。 本 书 自始至终 都 努力 在 这 两 者 之 间 达 到 平衡 。 

















为 什么 所 有 这 一 切 都 如 此 重要 ?为 什么 值得 花费 时 间 去 优化 过 渡 和 淡 入 淡出 效果 ?以 上 这 
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些 问题 的 答案 也 正 是 设计 师 花 费 几 个 小 时 优化 字体 和 颜色 的 原因 : 只 是 因为 使 产品 越 来 越 完美 ， 
这 种 感觉 棒 极 了 。 是 他 们 让 用 户 喷 喷 称 竟 、 口 口 相传 :“ 哇 ,这 简直 太 酷 了 。” 然 后 马上 转 头 对 朋 
友 叫 道 :“ 你 可 得 看 看 这 个 1” 
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< 注意 如 呆 不 获悉 基本 的 CSS 属 性， 那 就 需要 先 找 本 介绍 HTML 和 CSS 的 书 看 看 ， 然 后 再 来 
= 读本 书 。 
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第 1 章 
JavaScript 动 男 的 优势 





在 本 章 中 ， 我 们 将 会 对 比 CSS 动 画 和 JavaScript 动 画 的 优 筋 ， 
同时 介绍 JavaScript 动 画 的 特点 和 工作 流 方面 的 优势。 

简 而 言 之 ， 我 们 提供 所 需 的 背景 知识 ， 帮 助 你 理解 即将 在 本 
书 中 学 到 的 JavaScript 的 任何 知识 。 
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1.1 JavaScript 动画 与 CSS 动画 

















在 网 页 开发 圈子 里 有 一 种 误解 , 那 就 是 认为 CSS 动 画 是 网 络 中 唯一 可 以 实现 高 性 能 动画 的 
方法 。 这 种 误解 使 很 多 开发 人 员 干 脆 放 弃 了 用 JavaScript 实 现 动 画 ， 而 这 会 迫使 他 们 做 出 以 下 
行为 。 








口 在 样式 表 中 管理 有 关 用 户 界面 (UI) 互动 的 所 有 内 容 ， 这 样 代码 很 快 会 变 得 难以 维护 。 
口 御 牲 实时 动画 的 定时 控制 , 因为 它 只 能 通过 JavaScript 实 现 。( 在 移动 应 用 中 会 看 到 需要 响 
应 用 户 拖 搜 操 作 的 UI。 在 为 这 些 UI 设 计 动 画 时 ， 必 须 使 用 定时 控制 。) 

口 放弃 基于 物理 的 动 效 设计 ， 这 会 使 网 页 上 的 元 素 无 法 表现 得 像 真 实 世 界 中 的 物体 一 样 。 
口 不 再 支持 旧 浏 览 器 版 本 ， 而 实际 上 旧版 本 浏览 器 在 世界 范围 内 仍 大 量 使 用 。 


















































名 上 有 显著 优势 ， 那 是 因为 人 们 通常 拿 它 与 jQuery 的 动画 性 能 对 比 ， 后 者 确实 非常 慢 。 然 而 ， 








事实 是 ， 基 于 JavaScript 的 动画 与 基于 CSS 的 动画 一 样 快 。 之 所 以 人 们 错误 地 认为 CSS 动 画 在 
性 和 
出 





BE 注意 Velocityjs 是 一 个 著名 的 动画 库 ， 本 书 自始至终 都 在 使 用 它 。 这 是 个 轻 量 级 的 库 ， 但 
= 是 功能 却 异 常 丰富 。 另 外 ， 它 与 jQuery 的 动画 语法 类 似 ， 能 够 大 幅 降 低 学 习 难 度 。 


当然 ，CSS 非 常 适合 实现 悬 停 状 态 的 动画 效果 ( 例如: 当 鼠 标 位 于 链接 上 方 时 ， 链 接 变 成 蓝 
色 )， 这 也 是 通常 情况 下 基本 的 网 页 所 包含 的 动画 。CSS 过 渡 效 果 可 以 直接 在 已 有 的 样式 表 中 实 
现 , 这样 开发 人 员 就 可 以 避免 使 用 元 余 的 JavaScript 库 ， 使 页 面 不 再 及 肿 。 另 外 ，CSS 动 画 不 费 吹 
灰 之 力 就 可 以 呈现 上 佳 表 现 。 





























但 是 ， 本 书 将 会 说 明 为 什么 JavaScript 对 于 动画 来 说 经 常 是 更 好 的 选择 ， 简 单 的 悬 停 效果 
除外 。 





1.2 强大 的 性 能 所 


不 要 将 


JavaScript 


与 jQuery 


息 为 一 菊 。 





1.2 强大 的 性 能 


JavaScript 与 jQuery 常 被 错误 地 混为一谈 。JavaScript 动 画 很 快 ， 是 jQuery 让 它 慢 了 下 来 。 尽 管 
jQuery 非常 强大 ， 但 它 并 未 被 设计 成 高 性 能 的 动画 引擎 。 它 没有 避免 “布局 颠 艇 ”的 机 制 ， 这 使 
浏览 器 在 动画 处 理 过 程 中 ， 过 分 忙于 布局 处 理 的 工作 。 


另外 , 由 于 jQuery 的 代码 库 除 了 实现 动画 以 外 还 有 许多 其 他 目的 ， 因 此 它 的 内 存 消 耗 会 在 浏 
览 器 内 触发 垃圾 回收 ， 导 致 动画 在 不 可 预知 的 情况 下 卡 壳 。 最 后 ， 由 于 jQuery 团队 奉行 一 个 崇高 


太宗 辣 
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的 追求 ， 那 就 是 帮助 新 手 避免 用 坏 代 码 毁 了 他 们 的 UI， 因 此 jQuery 放弃 了 被 经 常 推荐 的 做 法 ， 拒 
不 使 用 requestAnimationFrame() 函 数 , 但 另 一 方面 浏览 需 竞 相 支持 该 函数 ， 因 为 它 可 以 为 网 络 动 
画 大 幅 提 升 帧 率 ( frame rate )。 











一 些 彻 底 绕 开 jQuery 的 JavaScript 动 画 库 通过 与 页 面 的 顺畅 交互 而 表现 出 非 几 的 性 能 。 其 中 之 
一 是 著名 的 动画 库 ， 也 是 本 书 自 始 至 终 使 用 的 Velocityjs。 这 是 个 轻 量 级 的 库 ， 但 是 功能 却 异常 
富 。 另 外 ， 它 与 jQuery 的 动画 语法 类 似 ， 能 够 大 幅 降低 学 习 曲 线 。 








有 关 性 能 的 问题 ， 我 们 会 在 第 7 章 中 深入 探讨 。 通 过 学 习 浏 览 需 泻 染 性 能 的 微妙 差异 ， 你 能 
够 打下 坚实 的 基础 , 为 所 有 的 浏览 顺和 设备 创建 可 靠 的 动画 效果 , 不 论 这 些 浏 览 器 和 设备 的 处 理 
能 力 如 何 。 











1.3 功能 





追求 速度 当然 不 是 使 用 JavaScript 的 唯一 理由 , 它 还 具有 一 大 堆 其 他 同等 重要 的 功能 。 让 我 们 
大 致 看 几 个 JavaScript 所 独 有 并 值得 关注 的 动画 功能 。 





1.3.1 页 面 滚动 


页 面 滚动 是 基于 JavaScript 的 动画 最 为 流行 的 应 用 之 一 。 最 近 , 网 页 设计 的 趋势 是 创建 很 长 的 
页 面 。 随 着 页 面 回 下 滚动 ， 让 每 一 部 分 新 的 内 容 自 动 滚 到 可 视 区 域 中 来 。 















































例如 Velocity 这 样 的 JavaScript 动 画 库 提供 了 一 种 将 元 素 滚动 至 可 视 区 域 的 简单 函数 : 


$element.velocity("scroll", 1000); 





以 上 代码 通过 使 用 Velocity 的 "scrol1" 命 令 让 浏览 器 用 1000 毫 秒 的 时 间 滚 动 至 $element 的 上 
方 边缘 人 位置。 注意 ，Velocity 的 语法 与 jQuery 的 $.animate() 函 数 几 乎 一 模 一 样 ， 这 会 在 本 章 后 面 
的 部 分 进行 详 述 。 





1.3.2 ”动画 反 转 

动画 反 转 是 用 于 撤消 元 素 前 一 个 动画 的 简便 方法 。 通过 调用 反 转 命令 , 你 会 使 元 素 以 动画 形 
式 变 动 回 上 一 个 动画 开始 之 前 的 值 。 反 转 的 常见 用 途 是 动态 显示 一 个 模 态 对 话 框 , 然后 在 用 户 点 
击 “ 关 闭 ”后 再 将 其 隐藏 起 来 。 














1.4 易 维 护 的 工作 流 三 5 


如 果 想 实现 动画 反 转 ,但 却 没有 优化 工作 流程 的 话 ， 你 会 这 么 做 : 把 上 次 在 每 个 元 素 上 动态 二 过 





显示 的 特定 属性 跟踪 记录 下 来 , 以 备 后 续 反 转动 画 之 用 。 但 是 在 UI 代码 中 跟踪 之 前 的 动画 状态 很 
快 就 会 变 得 难以 控制 。 与 之 形成 鲜明 对 比 的 是 Velocity， 通 过 reverse 命 令 就 可 以 记 住 一 切 。 














与 Velocity 中 scrol1 命 令 的 语法 相似 , reverse 命 令 也 是 通过 将 "reverse" 作 为 Velocity 的 第 一 个 
参数 传人 而 调用 的 : 


// 第 一 个 动画 : 设置 元 素 的 0pacity 属 性 变动 至 0 的 动画 
$element .velocity({ opacity: 0 }); 

// 第 二 个 动画 : 设置 元 素 的 opacity 属 性 值 变 动 回 初始 值 1 的 动画 
$element.velocity("reverse"); 





当 谈 到 JavaScript 的 动画 定时 控制 时 ， 就 不 仅仅 是 反 转 那么 简单 了 : JavaScript 还 允许 对 全 部 
正在 运行 的 动画 进行 全 局 减速 或 加 速 。 第 4 章 会 介绍 这 一 强大 功能 的 相关 知识 。 














1.3.3 ”基于 物理 的 动 效 


动 效 设计 中 的 物理 原则 反映 了 成 就 优秀 用 户 体 验 (UX ) 的 核心 原则 : 那 就 是 伴随 着 用 户 的 
输入 ， 界 面 出 现 自然 的 反应 。 换 言 之 ， 界 面 设计 遵从 物体 在 真实 世界 中 的 运动 规律 。 





























在 Velocity 中 有 一 个 简单 且 强 大 的 入 门 级 物理 动 效 , 即 基 于 弹簧 运动 原理 的 缓 动 类 型 。( 我 们 
会 在 下 一 章 详细 探讨 绥 动 的 概念 。) 使 用 典型 的 缓 动 选项 ， 可 以 传人 一 个 与 预先 定义 的 缓 动 曲线 
(例如 ，"ease" 或 "easeIn0utsine" ) 相对 应 的 字符 串 。 相 反 ， 弹 自 物 理 缓 动 类 型 接受 一 个 含有 两 
个 项 的 数组 作为 参数 。 























// 使 用 500 个 张力 单位 和 20 个 摩擦 力 单 位 的 婵 竹 物理 缓 动 ， 设 置 将 元 素 的 宽度 变动 至 "500px" 的 动画 
$element .velocity({ width: "500px" }, { easing: [ 500, 20 ] }); 


缓 动 数组 中 的 第 一 项 代表 弹簧 的 张力 , 而 第 二 项 代表 摩擦 力 。 张 力 值 越 大 , 动画 的 总 体 速 度 


就 越 快 , 总 体 反 弹 幅 度 就 越 大 。 摩擦 力 值 越 低 , 动画 尾部 振动 的 速度 就 越 快 。 通过 调整 这 些 数 值 ， 
可 以 为 页 面 上 每 一 个 动画 实现 独特 的 运动 效果 ， 这 有 助 于 强化 不 同行 为 之 间 的 差异 。 




















1.4 兄 维 护 的 工作 流 


设计 动画 是 一 个 不 断 试验 的 过 程 , 需要 反复 修改 时 间 和 组 动 值 才能 在 页 面 上 达到 和 谐 统一 的 
效果 。 然 而 无 可 避免 的 是 , 就 当 你 已 经 将 设计 优化 到 最 佳 时 , 客户 跳出 来 要 求 大 改 。 这 种 情况 下 ， 
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代码 是 否 易于 维护 就 变 得 至 关 重 要 了 。 

















基于 JavaScript 来 解决 这 一 工作 流 难 题 是 非常 优雅 的 ， 这 将 会 在 第 4 章 中 详细 阐述 。 在 这 里 先 

简要 解释 一 下 : 有 技术 可 以 将 一 个 个 JavaScript 动 画 链接 起 来 , 而 且 每 个 动画 都 有 各 自 不 同 的 持续 
时 间 和 缓 动 效果 等 ,这样 其 中 一 个 动画 的 定时 不 会 影 

可 以 把 某 个 动画 的 持续 时 间 改 来 改 去 ， 


妆 不 / 








响 其 他 动画 。 这 就 意味 着 不 用 重新 计算 ,就 
不 能 轻易 将 动画 设置 为 同时 进行 或 是 顺 次 进行 。 








1.5 ”小结 


了 


当 使 用 CSS 设 计 动 画 时 ， 











语言 , 具有 编程 语言 的 天 然 属 
擎 利用 这 一 点 来 提供 强大 的 功 








定 要 受 限 于 CSS 规 范 所 提供 的 那些 功能 。 但 JavaScript 是 一 门 编程 
其 第 三 方程 序 库 可 以 对 动 效 设计 进行 无 限 的 逻辑 控制 。 动 画 引 
， 不 仅 可 以 大 幅 优 化 工作 流 ， 还 能 

而 这 正 是 本 书 的 目的 所 在 : 用 尽 可 能 高 效 的 方法 设计 优美 的 动画 效果 。 








展 交 互动 效 设 计 的 可 能 性 。 








下 一 章 介绍 怎样 使 用 本 书 选择 的 JavaScript 动 画 引擎 Velocityjs。 通 过 掌握 Velocityjs， 将 会 了 
解 如 何 使 用 我 们 前 面 已 经 介绍 的 一 些 功能 以 及 其 他 更 多 内 容 。 


第 心 章 
使 用 Velocity.js 买 现 动 轿 





本 章 将 介绍 Velocity.js 所 提供 的 功能 、 命 令 和 选项 。 如 果 已 经 
对 基于 jQuery 的 动画 比较 熟悉 ， 那 就 已 经 明白 该 如 何 使 用 Velocity 
了 ， 它 的 作用 与 jQuery 的 $.animate() 函 数 基 本 一 模 一 样 。 


但 不 论 是 否 已 具备 相关 知识 , 由 于 本 章 对 Velocity 进行 了 功能 
分 解 ， 你 还 将 会 了 解 到 动画 引擎 行为 的 细微 差异 。 掌 握 这 些 细节 
会 帮助 你 从 新 手 荣 升 为 专家 。 即 使 对 JavaScript 动 画 和 Velocity 都 
已 经 非常 熟悉 ， 那 也 浏览 一 下 本 章 内 容 ， 就 当 帮 有 自 己 一 个 小 忙 。 
你 肯定 会 有 一 些 意 想不到 的 收获 。 
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2.1 JavaScript 动画 库 的 种 类 


JavaScript 动 画 库 有 很 多 种 类 。 有 一 些 是 在 浏览 带 中 再现 物理 交互 ， 有 一 些 使 WebGL 和 
Canvas 动 画 更 易于 维护 ， 有 一 些 专 注 于 SVG 动 画 ， 还 有 一 些 旨 在 提升 UI 动画 ， 本 书 的 重点 正 是 
这 最 后 一 种 。 








有 两 个 流行 的 UI 动画 库 , 它们 是 GSAP( 请 到 GreenSock.com 下 载 ) 和 Velocity( 请 到 VelocityJS. 
org 下 载 ), 在 使 用 本 书 期 间 , 可 以 免费 使 用 Velocity， 因 为 它 采 用 的 是 MIT 许 可 证 。( GSAP 要 根据 
网 站 的 商业 形式 收取 许可 费用 。) 此 外 , 令 Velocity 引 以 为 傲 的 是 : 利用 它 惊 人 强大 的 功能 可 以 写 
出 干净 并 出 色 的 代码 。 很 多 流行 网 站 都 采用 了 这 个 引擎 ， 例 如 Tumblr、Gap 和 Scribd。 
































响 对 了 ，Velocity 就 是 本 书 作者 编写 的 ! 


2.2 安装 jQuery 和 Velocity 





可 以 在 jQuery.com 下 载 jQuery， 在 VelocityJS.org 下 载 Velocity。 若 要 像 使 用 其 他 任何 JavaScript 
库 那 样 在 页 面 上 使 用 它们 , 只 需要 在 </body> 标 签 前 面 添加 指向 对 应 库 的 <script></script> 标 签 。 
如 果 想 链接 至 在 线 版 本 而 不 是 位 于 自己 电脑 上 的 本 地 副本 )， 那 么 代码 可 能 会 像 下 面 这 样 。 








<html> 
<head>My Page</head> 
<body> 
My content. 
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="//cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js"> «</script> 
</body> 
</html> 





当 同 时 使 用 jQuery 和 Velocity 时 ， 将 添加 jQuery 的 标签 放 到 Velocity 的 前 面 。 

















就 是 这 样 ! 现在 可 以 开始 学 习 使 用 Velocity.js 实 现 动 画 了 。 


2.3 ”使 用 Velocity: 基础 知识 


为 了 能 让 你 人 门 ， 我 们 先 从 基本 组 成 开始 讲 起 : 参数 、 属 性 、 值 和 链 式 操 作 。 既 然 jQuery 是 
这 样 无 处 不 在 ， 来 看 一 下 Velocity 与 它 的 关系 也 挺 重 要 。 
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2.3.1 Velocity 和 jQuery 





Velocity 函 数 是 独立 于 jQuery 的 , 但 两 者 可 以 结合 使 用 。 通常 这 么 做 的 好 处 是 可 以 利用 jQuery 
的 链 式 操作 : 当 你 先 用 jQuery 选择 了 一 个 元 素 后 , 就 可 以 用 这 个 元 素 去 调用 .velocity() 为 它 添加 
动画 效果 。 比 如 下 面 的 示例 。 











// 将 一 个 变量 分 配给 某 个 jQuery 元 素 对 象 
var $div = $("div"); 

// 使 用 Velocity 设置 该 元 素 的 动画 
$div.velocity({ opacity: 0 }); 

// 该 向 语 法 与 jQuery 自 有 的 animate 沪 数 相同 : 
// $div.animate({ opacity: 0 }); 





本 书 中 的 所 有 例子 都 是 将 Velocity 与 jQuery 结合 使 用 的 ， 因 此 也 都 使 用 该 语法 。 


2.3.2 参数 


Velocity 接受 多 个 参数 。 第 一 个 参数 是 一 个 对 象 ， 用 于 将 CSS 属 性 映射 到 最 终 的 期 望 数 值 上 。 
各 个 属性 以 及 它们 接受 的 数值 类 型 与 在 CSS 中 使 用 的 直接 对 应 。( 如 果 不 熟 悉 基础 的 CSS 属 性 , 请 
先 阅读 一 本 介绍 HTML 和 CSS 的 书 ， 然 后 再 来 阅读 本 书 。) 














// 设置 元 素 的 width 属性 值 变动 至 "500px" 且 其 opacity 属 性 值 变动 至 1 的 动画 。 
$element .velocity({ width: "500px", opacity: 1 }); 







小 窍门 ”在 JavaScript 中 ， 如 果 你 提供 的 属性 值 包含 字母 ( 而 不 是 只 有 整数 )， 那 么 要 将 它们 
用 半角 引号 括 起 来 。 


可 以 将 一 个 指定 动画 选项 的 对 象 作为 第 二 个 参数 传人 。 


$element .velocity({ width: "500px", opacity: 1 }, { duration: 400, easing: "swing" }); 








还 有 一 种 参数 简写 语法 , 那 就 是 不 将 选项 对 象 作 为 第 二 个 参数 传人 , 而 是 使 用 逗号 分 隔 参 数 
语法 。 这 种 写法 需要 列举 出 动画 的 持续 时 间 ( 接受 一 个 整数 值 )、 缓 动 形式 〈 一 个 字符 串 ) 和 动 
画 执 行 完 毕 后 触发 的 回调 函数 (一 个 函数 ) 以 上 这 些 参数 可 以 以 任何 顺序 用 半角 逗号 分 隔 。( 你 
马上 就 会 学 到 这 些 选 项 都 是 做 什么 用 的 。) 








// 设置 一 个 持续 1000 毫 秒 的 动画 ( 且 隐 式 使 用 "swing" 的 默认 组 动 值 ) 
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element .velocity({ top: 50 }, 1000); 

// 设置 一 个 持续 1000 毫 秒 且 缓 动 类 型 为 "ease-in-out 的 动画 

element .velocity({ top: 50 }, 1000, "ease-in-out"); 

// 设置 一 个 缓 动 类 型 为 "ease-out" 的 动画 ( 且 隐 式 使 用 默认 持续 时 间 400 毫 秒 ) 
element .velocity({ top: 50 }, "ease-out"); 

// 设置 一 个 持续 1000 毫 秒 且 在 动画 执行 完毕 后 触发 回调 函数 的 动画 
element.velocity({ top: 50 }，1000，function() { alert("Complete.") }); 









































在 只 需要 指定 基本 选项 (持续 时 间 、 缓 动 和 完成 ) 时 , 简写 语法 是 传人 动画 选项 的 快速 方法 。 
如 果 除了 以 上 三 个 动画 选项 之 外 ,还 要 传人 其 他 动画 选项 , 那 就 必须 将 所 有 选项 切换 至 对 象 语法 。 
因此 ， 如 果 需 要 指定 一 个 延迟 时 间 ， 就 需要 对 下 面 的 语法 进行 更 改 。 

















$element .velocity({ top: 50 }, 1000, "ease-in-out"); 
更 改 为 下 面 的 样子 。 


// 重新 指定 以 上 使 用 的 动画 选项 ， 但 将 延迟 时 间 设 置 为 500 毫 秒 
$element .velocity({ top: 50 }, { duration: 1000, easing: "ease-in-out", delay: 500 }); 


不 能 这 么 写成 下 面 的 样子 。 


// 错误 : 一 部 分 动画 选项 用 过 号 分 隔 的 语法 ; 一 部 分 用 对 象 语法 
$element.velocity({ top: 50 }, 1000, { easing: "ease-in-out", delay: 500 }); 


2.3.3 属性 
基于 CSS 的 属性 动画 与 基于 JavaScript 的 属性 动画 有 两 点 区 别 。 

















首先 ，Velocity 针 对 每 个 CSS 属 性 ， 只 接受 唯一 一 个 数值 ， 这 点 与 CSS 不 同 。 











因此 ， 可 以 这 样 传人 动画 选项 : 

$element .velocity({ padding: 10 }); 

或 者 

$element .velocity({ paddingLeft: 10, paddingRight: 10 }); 


但 不 能 按 下 面 这 样 传人 动画 选项 。 
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// 错误 : 针对 一 个 CSS 属 性 传 入 了 多 个 数值 。 
$element .velocity({ padding: "10 10 10 10" }); 


如 果 想 设置 全 部 四 个 padding 值 (top、right、bottom 和 1left ) 的 动画 ， 那 么 就 将 它们 作为 单 
独 的 属性 列 出 来 。 





// 正确 

$element .velocity({ 
paddingTop: 10， 
paddingRight: 10， 
paddingBottom: 10， 

paddingLeft: 10 

]); 





CSS 还 有 一 些 其 他 常见 的 多 值 属性 ， 包 括 : margin、transform、text-shadow 和 box-shadow。 





在 实现 动画 效果 时 ,将 这 些 复合 属性 分 拆 成 它们 的 子 属 性 有 助 于 加 强 对 缓 动 值 的 控制 .例如 ， 
在 CSS 中 ,实现 父 级 padding 属 性 内 的 多 个 子 属 性 的 动画 时 , 仅 可 以 指定 一 种 属性 范围 的 缓 动 类 型 。 
在 JavaScript 中 , 可 以 为 每 一 个 子 属性 设置 缓 动 值 , 这 么 做 的 优势 在 本 章 后 续 讨论 CSS 的 transform 
届 性 动画 时 就 变 得 尤为 明显 了 。 















































把 各 自 独 立 的 子 属性 都 列举 出 来 也 会 使 动画 代码 更 易 读 也 更 易 维 护 。 














基于 CSS 的 属性 动画 与 基于 JavaScript 的 属性 动画 第 二 个 不 同 点 在 于 : JavaScript 的 属性 名 称 
中 ,单词 之 间 的 连接 号 去 掉 了 ， 除 第 一 个 单词 外 ， 其 余 单词 都 首 字 母 大 写 。 例 如 : padding-left 
变 成 了 paddingLeft; background-color 变 成 了 backgroundColor。 男 外 还 要 注意 ，JavaScript 的 属性 
名 称 不 能 用 引号 括 起 来 。 














// 正确 

$element.velocity({ paddingLeft: 10 }); 

// 错误 : 使 用 了 连 字符 ， 而 且 第 二 个 单词 首 字母 没有 大 写 
$element .velocity({ padding-left: 10 }); 

// 错误 : 将 JavaScript 格 式 的 属性 名 称 用 引号 括 起 来 了 
$element .velocity({ "paddingLeft": 10 }); 


2.3.4 值 


Velocity 支 持 px、em、rem、%、deg、vw 和 和 vh 这 些 单位 。 如 果 没 有 为 数值 提供 单位 ， 那 么 就 会 
根据 CSS 属 性 类 型 自动 指派 一 个 单位 给 它 。 对 于 大 多 数 属性 ，px 是 默认 单位 。 但 是 ， 有 些 属性 可 
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能 表示 旋转 的 角度 ， 例 如 fotateZz，Velocity 会 自动 将 deg 单 位 指派 给 它 。 


$element .velocity({ 
top: 50，// 默认 使 用 px 单位 类 型 
left: "50%"，// 手动 指定 了 % 单 位 类 型 
ITotateZ: 25 // 默认 使 用 deg 单 位 类 型 
]); 


为 所 有 属性 值 清晰 指明 单位 会 让 代码 更 易 读 ,因为 当 你 快速 浏览 代码 时 ，px 单 位 与 其 他 单位 
就 更 易 区 分 。 











Velocity 胜 过 CSS 的 另 一 优势 在 于 它 有 四 个 值 运算 符 +、- 、* 和 /， 可 以 选择 其 中 一 个 加 到 属性 
值 前 面 。 这 些 运 算 符 的 作用 与 JavaScript 中 的 数学 运算 符 一 致 。 也 可 以 将 这 些 值 运算 符 与 等 号 (= ) 
组 合 使 用 ， 来 进行 相应 的 数值 运算 。 请 参考 下 面 的 行 间 注释 。 

















$element.velocity({ 
top: "50px"，// 无 运算 符 ， 按 预期 设置 top 属 性 变动 至 50 的 动画 。 
left:"-50",，// 负 运算 符 ， 按 预期 设置 left 属 性 变动 至 -50 的 动画 。 
width: "+=5rem",，// 将 当前 的 width 值 转 成 以 rem 为 单位 的 ， 然 后 再 加 5 个 单位 。 
height: "-10rem"，// 将 当前 height 值 转 成 以 Tem 为 单位 的 ， 然 后 再 减 10 个 单位 。 
paddingLeft: "*#=2”// 将 当前 的 paddingLeft 值 乘 以 2。 
paddingRight:"/=2”// 将 当前 的 paddingLeft 值 除 以 2。 

]); 








Velocity 的 简写 功能 ， 例 如 值 运 算 符 ， 可 以 在 动画 引擎 内 完全 保留 动画 逻辑 。 无 需 再 进行 手 
工 值 运 算 ， 这 使 代码 更 加 简洁 。 除 此 以 外 ， 通 过 告诉 Velocity 你 打算 如 何 实现 元 素 的 动画 ， 人 性 能 
也 得 到 了 提升 。 在 Velocity 里 运行 的 逻辑 越 多 ，Velocity 就 能 越 好 地 优化 代码 ， 达 到 更 高 的 帧 率 。 
































2.3.5” 链 式 操作 


当 一 个 元 素 (或 一 系列 元 素 ) 链 式 调 用 多 个 Velocity 函数 时 ， 它 们 会 自动 排 成 队列 。 这 意味 
着 前 一 个 动画 一 结束 ， 后 一 个 动画 马上 就 开始 。 





$element 
// 设置 Width 和 height 属 性 的 动画 
.Velocity({ width: "100px", height: "100px” }) 
// 在 运行 Width 和 height 属 性 的 动画 时 ,设置 top 属 性 的 动画 
.velocity({ top: "50px" }); 
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2.4 使 用 Velocity: 选项 


在 本 章 完成 对 Velocity 的 简介 之 前 ， 让 我 们 大 致 浏览 一 下 以 下 几 个 最 常用 的 选项 : duration、 
easing 、begin 和 complete 、loop 、delay 和 display。 


2.4.1 duration 〈 持 续 时 间 ) 


可 以 以 毫秒 (ms， 即 千 分 之 一 秒 ) 为 单位 指定 duration 选 项 ， 该 选项 指定 一 个 动画 调用 需要 
花费 多 长 时 间 才 能 完成 ， 或 者 也 可 以 将 duration 指 定 为 以 下 三 个 简写 duration 之 一 : "slow" (相当 


于 600ms )、"normal" (400ms ) 或 
不 带 单 位 的 整数 值 。 








"fast"( 200ms )。 以 毫秒 为 单位 指定 duration 值 时 ， 请 提供 一 个 


// 设置 持续 1000 毫 秒 〈 即 1 秒 ) 的 动画 


$element .velocity({ opacity: 1 
或 


$element .velocity({ opacity: 1} 























动画 的 节奏 究竟 是 慢 还 是 快 ? 如 司 


}, { duration: 1000 }); 


，{ duration: "slow" }); 


使 用 意义 明确 的 duration 简 写 形 式 有 个 好 处 ， 那 就 是 当 你 重新 查看 代码 时 ， 它 能 清楚 地 表明 








只 使 用 这 几 个 简写 形式 , 那么 网 站 上 的 动 效 设计 就 自然 而 然 地 




















形成 了 统一 的 节奏 ， 因 为 每 个 动画 都 肯定 是 这 三 种 速度 之 一 ， 而 不 是 什么 其 他 随意 设 定 的 数值 。 


2.4.2 easing 〈 缓 动 ) 








easing 选 项 都 是 数学 函数 ， 它 们 定义 了 在 动画 的 整个 持续 时 间 中 的 不 同时 间 段 内 动画 应 该 执 


行 得 有 多 快 或 多 慢 。 例 如 ，"ease 





后 维持 这 一 速度 直至 动画 结束 。" 








-in-out" 缓 动 类 型 就 表示 动画 一 开始 要 逐渐 加 速 (ease in )， 最 


后 要 逐渐 减速 (ease out )。 相 比 之 下 ，"ease-in" 组 动 类 型 则 使 动画 在 一 开始 加 速 到 目标 速度 ， 然 


ease-out" 缓 动 类 型 恰恰 与 之 相反 : 动画 以 恒定 速度 开始 并 持续 


一 段 时 间 ， 然 后 在 动画 结束 之 前 逐渐 减速 。 





就 像 在 第 1 章 中 讨论 到 的 基于 物理 的 动 效 一 样 ， 这 些 缓 动 也 赋予 你 力量 ， 使 你 能 将 个 性 注入 
到 动画 当中 。 举 例 来 讲 ， 使 用 线性 运动 作为 缓 动 类 型 的 动画 看 上 去 是 多 么 机 械 啊 。( 线性 缓 动 所 

















产生 的 动画 在 动画 开始 、 运 行 以 及 结束 时 ， 速 度 一 致 。) 之 所 以 会 产生 机 械 的 感受 是 因为 人 们 马 


上 联想 到 现实 世界 中 的 线性 运动 : 





























自制 导 的 机 械 物 体 通常 是 在 直线 上 以 同样 的 速度 移动 , 这 是 因 
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为 它们 既 不 用 于 审美 也 不 是 有 机 体 ， 因 此 无 法 自行 变速 运动 。 








与 之 相反 ,只 要 是 生物 , 不 论 是 人 体 还 是 风 中 摇 遇 的 树枝 ,在 现实 世界 中 都 绝 不 会 以 恒定 速 
度 运动 。 摩 擦 力 以 及 其 他 外 力 使 它们 的 运动 速度 一 直 在 变 。 














优秀 的 动 效 设 计 师 尊崇 的 是 有 机 的 运动 , 因为 它 会 让 人 感觉 界面 是 随 着 用 户 的 互动 而 自然 地 
作出 反应 。 例 如 ,在 移动 应 用 中 ,将 菜单 划 离 屏幕 时 ， 你 预计 它 会 迅速 加 速 远离 你 的 手指 。 如 果 
菜单 栏 没 有 这 样 反 应 ， 而 是 就 好 像 机 械 手 臂 一 样 ， 以 恒定 速度 离开 你 的 手指 , 那么 你 会 感觉 划 屏 
只 不 过 是 触发 了 一 系列 运动 ， 但 那些 运动 是 在 你 掌控 以 外 的 。 
































第 3 章 将 介绍 更 多 有 关 缓 动 类 型 的 强大 功能 。 现 在 ， 让 我 们 先 大 致 浏览 一 下 Velocity 的 所 有 可 
用 的 缓 动 值 。 


D jQuery UI 中 的 三 角 函 数 缓 动 (trigonometric easing )。 要 想得到 所 有 这 些 缓 动 方程 的 列表 以 
及 它们 变速 运动 的 互动 演示 ， 请 参考 easings.net 上 的 示例 。 





$element.velocity({ width: "100px" }, "easeInOutSine"); 


口 CSS 缓 动 : "ease-in"、"ease-out"、"ease-in-out" 和 "ease" ("ease-in-out" 的 男 一 个 更 


缓和 的 版 本 )。 


$element.velocity({ width: "100px" }, "ease-in-out"); 

















口 CSS 的 贝 赛 尔 曲线 (Bezier curves ): 通过 贝 赛 尔 曲线 缓 动 ,可 以 完全 控制 一 个 绥 动 加 速 曲 
线 的 结构 。 一 条 贝 塞 尔 曲线 可 以 通过 指定 图 中 四 个 等 距 点 的 高 度 来 确定 ，Velocity 所 接受 
的 参数 格式 是 一 个 含有 四 个 小 数 的 数组 。 请 访问 cubic-beziercom 获 取 创建 贝 赛 尔 曲线 的 互 
动 指南 。 























$element.velocity({ widthn: "100px" }, [ 0.17, 0.67, 0.83, 0.67 ]); 





口 弹簧 物理 〈 Spring physics ): 这 种 缓 动 类 型 模仿 的 是 弹簧 在 拉 伸 以 后 被 突然 释放 的 弹 动 行 
为 。 就 像 是 经 典 的 定义 弹簧 运动 的 物理 方程 一 样 ， 这 种 缓 动 类 型 允许 你 提供 一 个 含有 两 
个 值 的 数组 作为 参数 ， 形 式 为 [张力 、 摩 擦 力 ]。 张 力 越 大 (默认: 500 )， 整 体 速度 和 弹 动 
幅度 就 越 大 。 摩 擦 力 越 小 (默认 : 20 )， 弹 纂 结尾 处 的 震动 速度 就 越 快 。 




















$element.velocity({ width: "100px" }, [ 250, 15 ]); 
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口 如 果 不 想 试验 各 种 张力 和 摩擦 力 数值 , "spring" 缓 动 就 是 一 种 随手 可 用 的 弹簧 物理 缓 动 的 








预 设 。 


$element.velocity({ width: "100px" }, "spring"); 





属性 传人 ,比如 下 








请 记 住 , 也 可 以 将 缓 动 选项 作为 一 个 在 另 一 个 选项 对 象 参数 中 显 式 定义 的 
面 的 代码 。 


$element .velocity({ width: 50 }, { easing: "spring” }); 


不 要 见 到 这 么 多 绥 动 类 型 就 感到 不 知 所 措 。 大 多 数 时 候 ,只 会 用 到 CSS 的 缓 动 类 型 和 "spring" 
缓 动 ， 因 为 它们 适用 于 绝 大 多 数 动画 使 用 场景 。 最 复杂 的 缓 动 类 型 ， 也 就 是 贝 赛 尔 曲线 ,通常 是 
被 那些 脑 中 已 有 明确 缓 动 形式 的 开发 人 员 使 用 ， 而 且 这 些 人 还 得 不 嫌 麻 烦 、 不 怕 折 腾 。 


























tk 注意 ”必须 将 本 节 中 提 到 的 其 他 Velocity 选项 明确 地 传 入 到 某 个 选项 对 象 中 。 与 已 经 介绍 过 
的 那些 选项 不 同 ， 其 他 这 些 选项 不 能 以 简写 的 去 号 分 隔 语 法 提供 给 Velocity。 


A 


2.4.3 begin 开始 ) 和 complete (完成 ) 
使 用 begin 和 complete 选 项 可 以 指定 要 在 动画 中 的 特定 时 间 点 触发 的 函数 为 begin 设 置 的 函 
数 会 在 动画 开始 之 前 触发 。 与 之 相反 ， 为 complete 设 置 的 函数 会 在 动画 完成 时 调用 。 

使 用 这 两 个 选项 , 每 次 调用 动画 时 都 会 调用 一 次 指定 函数 ,即使 同时 制作 多 个 元 素 的 动画 也 


是 如 此 。 


























var $divs = $("div"); 
$divs.velocity( 
{ opacity: 0 }, 
// 在 动画 开始 之 前 打开 一 个 警告 框 
{ 
begin: function () { console.log("Begin!"); }, 
// 动画 一 结束 就 打开 一 个 警告 框 
complete: function () { console.log("Complete!"); } 


} 
); 
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回调 函数 

这 些 选 项 通常 被 称 为 “回调 函数 ”( 或 “回调 ”)， 因 为 它们 是 在 未 来 茶 个 特定 事件 发 生 时 
被 “调用 ”的 。 当 需要 依据 元 素 的 可 见 性 来 触发 事件 时 ,回调 函数 就 能 派 上 用 场 。 例 如， 如 果 
一 个 元 素 最 初 不 可 见 ， 然 后 制作 opacity 变 动 至 1 的 动画 ， 那 么 可 能 就 适合 在 随后 触发 一 个 UI 事 
件 ， 使 用 户 一 看 见 这 个 元 素 就 能 对 该 新 内 容 进 行 修改 。 

请 记 住 ， 如 果 想 让 多 个 动画 一 个 个 排 成 队列 ， 那 么 就 不 需要 使 用 回调 函数 ， 因 为 如 果 多 个 
动画 指派 给 了 单独 一 个 或 一 组 元 素 , 那么 它们 会 自动 按 顺序 触发 。 回调 函数 不 是 用 来 给 动画 排 
队 的 。 


2.4.4 _ loop 循环) 
将 loop 选 项 设置 为 一 个 整数 ， 该 整数 是 几 ， 动画 就 应 该 在 调用 的 属性 映射 中 的 值 与 调用 之 前 
元 素 的 值 之 间 交 替 几 次 。 














$element .velocity({ height: "10em" }, { loop: 2 }); 


如 果 元 素 的 初始 height 值 为 Sem， 那 么 它 的 高 度 就 会 在 Sem 和 10em 之 间 交 替 两 次 。 





如 果 将 begin 或 complete 选 项 与 某 个 循环 调用 一 起 使 用 ， 那 么 它们 每 个 只 会 被 触发 一 次 ， 分 
| 是 在 整个 循环 序列 最 开始 时 和 结束 时 ; 它们 不 会 在 每 次 循环 交 奉 时 被 重新 触发 。 





演 


除了 可 以 传 入 整数 以 外 ， 还 可 以 将 布尔 值 true 传 给 loop， 这 样 就 会 触发 无 限 循环 。 
$element.velocity({ height: "10em" }, { loop: true }); 


无 限 循环 会 忽略 complete 回 调 ， 因 为 循环 不 会 自然 停止 。 不 过 可 以 通过 Velocity 的 stop 命 令 ， 
手动 停止 循环 。 


$element.velocity("stop"); 





有 限 循环 对 于 需要 重复 链 式 动画 代码 的 动画 序列 很 有 用 。 例 如 ,如 果 想 让 一 个 元 素 上 下 弹跳 
两 次 (也许 是 想 提示 用 户 有 新 消息 等 待 阅读 )， 未 经 优化 的 代码 会 像 下 面 这 个 样子 。 











$element 
// 假设 translateY 的 初始 值 是 "0px"。 
.velocity({ translateY: "100px” }) 
.velocity({ translateY: "opx"” }) 
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.Velocity({ translateY: "100px"” }) 
.velocity({ translateY: "opx" }); 




















更 简洁 方便 且 易 于 维护 的 代码 版 本 则 是 下 面 这 个 样子 。 


// 重复 (循环 ) 该 动画 两 次 
$element.velocity({ translateY: "100px" }, { loop: 2 }); 








有 了 这 个 优化 的 版 本 ， 当 你 改变 主意 想 修改 最 大 变动 值 ( 目前 是 "100px" ) 时 ， 就 只 需 在 代 
码 的 一 个 地 方 更 改 一 个 数值 即 可 。 如 果 在 代码 中 有 多 处 重复 的 动画 , 那么 循环 为 你 的 工作 流 带 来 
的 好 处 就 立马 显现 出 来 了 。 





无 限 循环 对 于 加 载 指示 器 〈loading indicator ) 大 有 帮助 ， 因 为 通常 情况 下 ， 只 要 数据 还 没有 
加 载 完毕 ， 就 会 一 直 显 示 加 载 指示 器 的 动画 。 




















首先 , 通过 让 元 素 的 不 透明 度 在 可 见 与 不 可 见 之 间 无 限 循环 , 使 加 载 元 素 看 上 去 像 是 在 做 有 
规律 的 跳动 。 





// 假设 opacity 的 初始 值 是 1 (完全 可 见 ) 
$element .velocity({ opacity: 0 }, { loop: true }); 


稍 后 ， 只 要 数据 完成 加 载 ， 就 可 以 立即 停 目 动画， 然后 隐藏 该 元 素 。 


$element 
// 首先 停止 无 限 循环 …… 
.velocity("stop") 
A ss 这 样 可 以 为 元 素 添 加 一 个 新 动画 ， 
// 在 该 动画 中 ， 您 可 以 使 该 元 素 变动 回 不 可 见 
.velocity({ opacity: 0 }); 


2.4.5 delay (延迟) 


将 delay 指 定 为 多 少 毫秒 ， 在 动画 开始 之 前 就 会 暂停 多 长 时 间 。delay 选 项 的 目的 是 将 动画 的 
定时 逻辑 完全 保留 在 Velocity 内 , 而 不 是 在 Velocity 的 动画 开始 时 依赖 jQuery 的 $.delay() 函数 来 更 改 。 


// 等 待 100 毫 秒 后 再 设置 opacity 的 值 变动 至 0 的 动画 
$element .velocity({ opacity: 0 }, { delay: 100 }); 


可 以 同时 设置 delay 和 1oop 选 项 ， 这 样 可 以 在 循环 交替 之 间 创 建 一 个 停顿 








oO 
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// 循环 四 次 ， 每 次 循环 之 间 都 等 待 100 毫 秒 
$element .velocity({ height: "+=50px" }, { loop: 4, delay: 100 }); 


2.4.6 display (显示 〉 和 visibility (可 见 性 ) 


Velocity 中 的 display 和 visibility 选 项 与 CSS 中 的 同名 属性 一 一 对 应 ， 接 受 的 值 也 相同 ， 包 
括 : "none"、"inline"、"inline-block"、"block"、"flex" 等 。 男 外 , Velocity 还 允许 将 值 设 为 "auto" ， 
从 而 告诉 Velocity 将 display 属 性 的 值 设 为 与 元 素 的 默认 值 一 致 。( 参考 : anchor 和 span 的 默认 值 为 
"inline"; 而 div 和 大 多 数 其 他 元 素 的 默认 值 为 "block"。) Velocity 的 visibility 选 项 也 像 CSS 中 的 
同名 属性 一 样 ， 接 受 "hidden" 、"visible" 和 "collapse" 等 值 。 









































在 Velocity 中 ， 如 果 将 display 选 项 设置 为 "none" (或 者 如 果 将 visibility 选 项 设置 为 
"hidden" ), 那么 Re 元 素 的 CSS 属 性 也 会 进行 相应 设置 。 这 种 做 法 有 效 地 实现 了 动画 
一 完成 就 将 元 素 隐 藏 ， 同时， 要 将 元 素 的 opacity 值 变动 至 0 时 ( 即 想 要 让 元 素 在 页 面 上 淡出 )， 
搭配 这 种 做 法 也 很 实用 。 

















// 使 元 素 淡 出 直至 opacity 变 为 0， 然 后 将 该 元 素 从 页 面 的 文档 流 中 移 除 
$element .velocity({ opacity: 0 }, { display: "none” }); 


dk 注意 上 面 的 代码 可 以 有 效 痊 代 下 面 这 段 ]Query 代 码 。 
BS $element 

.animate({ opacity: 0 }) 

.hide(); 


快速 回顾 visibility 和 display 

CSS 中 的 display 属 性 决定 了 一 个 元 素 如 何 影 响 其 周围 元 素 及 其 包含 的 元 素 。 相 比 之 下 ， 
CSS 中 的 visibility 属 性 则 仅 影响 元 素 是 否 可 见 。 如 果 元 素 被 设置 为 "visibility: hidden", 那 
么 它 还 是 会 占据 页 面 上 的 位 置 ， 只 不 过 这 个 位 置 上 显示 为 空白 ， 该 元 素 不 会 被 人 们 看 到 而 已 。 
但 是 ， 如 果 元 素 被 设置 为 "display: none"， 则 会 在 文档 流 中 移 除 该 元 素 ， 所 有 该 元 素 内 部 以 
及 周围 的 元 素 会 填充 到 移 除 元 素 的 位 置 ， 就 好 像 该 元 素 从 来 没有 存在 过 

请 注意 ,如 果 不 想 将 元 素 从 文档 流 中 移 除 ,可 以 i "hidden" 
使 其 隐藏 并 无 法 交互 。 在 想 要 隐藏 元 素 但 想 让 它 继续 占据 页 面 位 置 时 ， 这 种 做 法 就 很 有 用 。 


// 使 元 素 淡 出 直至 opacity 变 为 0， 然 后 使 它 不 再 能 够 交互 
$element.velocity({ opacity: 0 }, { visibility: "hidden"” }); 
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现在 ， 证 我 们 以 相反 的 方向 考虑 动画 〈 不 再 隐藏 元 素 而 是 要 显示 元 素 ): 当 display 和 
visibility 的 值 分 别 被 设 为 "none" 或 "hidden" 以 外 的 值 时 ， 该 值 是 在 动画 开始 之 前 设置 的 ， 因 此 
元 素 在 随后 整个 动画 期 间 都 是 可 见 的 。 换 言 之 ， 当 元 素 在 之 前 通过 移出 可 视 区 域 的 方式 隐藏 时 ， 
可 以 用 这 种 方法 将 隐藏 取 消 。 


下 面 的 例子 中 ， 在 元 素 开始 淡 入 前 ， 其 display 被 设置 为 "block"。 > 





























$element.velocity({ opacity: 1 }, { display: "block” }); 


上 面 的 代码 可 以 有 效 奉 代 下 面 的 jQuery 代码 。 





$element 
.Show() 
.animate({ opacity: 0 }); 


小 窑 门 ”要 查看 Velocity 动 画 选 项 的 完整 概述 ， 请 参考 VelocityJS.org 上 的 文档 。 
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包含 动画 逻辑 

就 像 Velocity 的 delay 选 项 一 样 ，Velocity 将 CSS 的 djisplay 和 visibility 设 置 也 包含 进来 , 使 
动画 逻辑 得 以 全 部 在 Velocity 中 实现 。 在 产品 代码 中 ， 不 论 元 素 是 淡 入 还 是 淡出 ， 基 本 上 总 是 
伴随 着 display 或 visibility 属 性 的 变化 。 利 用 Velocity 的 这 些 简 写 形式 能 够 帮助 保持 代码 简洁 
并 易于 维护 ， 因 为 它 不 太 依 赖 于 外 部 的 jQuery 函数 ， 而 且 也 摆脱 了 那些 经 常 使 动画 逻辑 宛 余 不 
堪 的 重复 性 的 辅助 函数 (helper function )。 

注意 ， 针 对 上 面 示例 中 的 不 透明 度 切 换 的 动画 ，Velocity 也 有 简写 形式 。 它 们 的 作用 与 
jQuery 中 的 fadeIn 和 fade0ut 函数 相同 。 只 需要 将 对 应 的 命令 作为 第 一 个 参数 传 入 Velocity， 然 
后 在 需要 时 传 入 一 个 选项 对 象 即 可 。 


$element.velocity("fadeIn", { duration: 1000 }); 
$element.velocity("fadeOut", { duration: 1000 }); 


2.5 使 用 Velocity: 其 他 功能 





Velocityjs 的 其 他 值得 一 提 的 功能 包括 : reverse ( 反 转 ) 命令 、scrolling ( 滚动 )、color ( 颜色 ) 
和 transform ( 变换 ， 包 括 translation“ 平 移 ” rotate“ 旋 转 ” 和 scale“ 缩 放 ”)。 
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2.5.1 reverse ( 反 转 ) 命令 








要 让 元 素 变 动 回 到 上 次 调用 Velocity 之 前 的 值 ， 请 将 "reverse" 作 为 第 一 个 参数 传人 Velocity 


中 。"reverse" 命 令 的 作用 与 标准 的 Velocity 调 用 相同 ; 它 可 以 取 用 选项 ， 并 与 其 他 链 式 Velocity 
调用 一 起 形成 队列 。 























反 转 命令 默认 采用 在 元 素 的 上 次 Velocity 调 用 中 使 用 的 选项 ( duration、easing 等 )。 但 是 ， 


也 可 以 传人 新 的 选项 对 象 来 覆盖 掉 原 有 的 这 些 选 项 。 


tk 


= 





// 使 用 上 次 Velocity 调用 的 选项 设置 变动 回 原始 值 的 动画 
$element.velocity("reverse"); 


或 者 


// 与 上 面 代 码 的 作用 相同 ， 只 是 用 值 2000 毫 秒 替换 了 先前 调用 的 duration。 
$element.velocity("reverse", { duration: 2000 }); 


注意 一 旦 使 用 了 reverse 命 令 ， 那 么 之 前 调用 中 的 begin 和 complete 就 会 被 忽略 ; reverse 
永远 不 会 重新 调用 回调 函数 。 


2.5.2 scrolling 〈 滚 动 ) 





要 让 浏览 器 滚动 至 一 个 元 素 的 上 缘 位 置 ， 请 将 "scrol1" 作 为 Velocity 的 第 一 个 参数 传人 。 





"scroll" 命 令 的 行为 与 标准 Velocity 调用 的 行为 相同 ; 它 可 以 取 用 选项 ， 并 与 其 他 链 式 Velocity 调 
用 一 起 形成 队列 。 


$element 
.velocity("scroll", { duration: 1000, easing: "spring” }) 
.velocity({ opacity: 1 }); 


上 面 的 代码 会 让 浏览 器 移动 到 指定 元 素 的 上 缘 位 置 ， 持 续 时 间 为 1000 毫 秒 ， 缓 动 类 型 为 


"spring"。 然 后 ,一 旦 元 素 移 动 到 可 视 区 域 中 ， 它 就 会 完全 淡 入 。 








要 想 在 一 个 含有 滚动 条 的 父 元 素 内 滚动 至 某 个 元 素 ， 可 以 使 用 container ( 容器 ) 选项 ， 它 





接受 一 个 jQuery 对 象 或 原生 对 象 。 注 意 ， 在 容器 元 素 的 CSS 中 ， 必 须 将 属性 设置 为 relative、 
absolute 或 fixed; 如 果 设 置 为 static 则 不 起 作用 。 
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// 将 $element 元 素 滚 动 至 $("#container") 的 视图 中 
$element.velocity("scroll", { container: $("#container") }); 
































无 论 是 相对 于 浏览 器 窗口 滚动 还 是 相对 于 父 元 素 滚动 ，scroll 命 令 在 这 两 种 情况 下 总 是 由 要 
被 滚动 到 可 视 区 域 中 的 元 素来 调用 。 








默认 情况 下 ， 滚 动 是 在 ? 轴 上 发 生 的 。 传 人 axis: "x" 选 项 则 会 在 横向 而 非 纵 向 上 滚动 。 





// 滚动 浏览 器 至 目标 div 的 左边 缘 。 
$element.velocity("scroll", { axis: "x"” }); 




















最 后 ，scroll 命 令 还 采用 了 一 个 独 有 的 offset 选 项 (单位 为 像素 )， 该 选项 的 作用 是 使 目标 滚 
动 位 置 发 生 偏 移 。 





// 滚动 至 元 素 上 边缘 以 上 50 像 素 处 。 
$element.velocity("scroll", { duration: 1000, offset: "-50px” }); 
// 滚动 至 元 素 上 边缘 以 下 250 像 素 处 。 
$element.velocity("scroll", { duration: 1000, offset: "250px” }); 





2.5.3 ”color (颜色 ) 








Velocity 支 持 以 下 这 些 CSS 属 性 的 颜色 动画 : color 、backgroundColor 、borderColor 和 
outlineColor。 在 Velocity 中 ， 颜 色 属 性 只 接受 表示 颜色 的 十 六 进 制 字 符 串 ， 例 如 ，#000000( 黑 
色 ) 或 #e2e2e2 (小 灰 )。 要 更 加 精细 地 控制 颜色 ， 可 以 单独 控制 一 个 颜色 中 的 红 、 绿 和 蓝 分 量 ， 
还 可 以 控制 alpha 分 量 。 红 、 绿 、 蓝 分 量 的 值 的 范围 是 0 至 255; alpha ( 相当 于 不 透明 度 ) 值 的 范 
悦 是 从 0 到 1。 







































































请 参考 下 面 例 子 中 的 行内 注释 。 


$element .velocity({ 
// 设置 backgroundColor 变 动 至 黑色 的 十 六 进 制 值 的 动画 
backgroundColor: "#000000", 
// 同时 设置 将 背景 的 alpha (不 透明 度 ) 值 变动 至 50% 的 动画 
backgroundColorAlpha: 0.5， 
// 另外 设置 将 元 素 的 文字 颜色 中 的 红色 分 量 值 变动 至 总 值 一半 的 动画 
colorRed: 125 


上 
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2.5.4 transform (变换 ) 


CSS 中 的 transform 属 性 可 以 控制 元 素 在 2D 和 3D 空 间 中 进行 平移 、 缩 放 和 旋转 。 它 包括 很 多 
子 属性 分 量 ， 其 中 Velocity 支持 以 下 这 些 属 性 分 量 。 











口 translateX: 沿 x 轴 移 动 元 素 。 

口 translateY: 沿 y 轴 移动 元 素 。 

口 rotatez: 围绕 z 轴 旋转 元 素 ( 实际 上 就 是 在 2D 平 面 上 顺 时 针 或 着 时 针 旋 转 )。 
口 rotatex: 围绕 x 胃 旋转 元 素 〈 实际 上 就 是 在 3D 空 间 中 靠近 或 远离 用 户 旋 转 )。 
口 rotateY: 围绕 y 轴 旋转 元 素 ( 实际 上 就 是 在 3D 空 间 中 向 左 或 向 右 旋转 )。 

口 scaleX: 使 元 素 的 宽度 尺寸 成 倍增 加 。 

D scaleY: 使 元 素 的 高 度 尺寸 成 倍增 加 。 



































在 Velocity 中 ， 可 以 将 这 些 分 量 作为 某 个 属性 对 象 内 的 单独 属性 设置 其 动画 。 











$element .velocity({ 
translateZ: "200px", 

TotateZ: “45deg 

]); 


2.6 使 用 Velocity: 不 用 jQuery 中 级 技巧 ) 


如 果 你 是 一 位 中 级 开发 人 员 , 喜欢 在 没有 jQuery 的 帮助 下 使 用 JavaScript, 那么 你 会 感到 开心 ， 
因为 Velocity 也 可 以 在 页 面 中 没有 jQuery 的 情况 下 使 用 。 相 应 地 , 正如 本 章 前 面 例子 中 所 展示 的 那 
样 ， 此 时 动画 的 链 式 操作 不 能 再 由 jQuery 元 素来 调用 ， 而 是 要 直接 将 目标 元 素 〈 一 个 或 多 个 ) 作 
为 第 一 个 参数 传人 动画 调用 中 。 











Velocity(element，{ opacity: 0.5 }, 1000); // Velocity 





即使 在 不 用 jQuery 的 情况 下 ，Velocity 依 然 保 留 了 与 jQuery 中 $.animate() 函 数 一 样 的 语法 ; 区 
别 在 于 所 有 的 参数 都 向 右 移 了 一 个 位 置 ， 留 出 了 第 一 个 位 置 来 传 目 标 元 素 。 此 外 ,动画 是 由 全 局 
性 的 Velocity 对 象 来 触发 的 ， 而 不 再 由 特定 的 jQuery 元 素 对 象 触 发 。 












































在 没有 jQuery 的 情况 下 使 用 Velocity 时 ,不 需要 再 设置 jQuery 元 素 对 象 的 动画 ， 而 是 设置 原生 
文档 对 象 模型 (DOM ) 元 素 的 动画 。 可 以 使 用 以 下 函数 检索 原生 DOM 元 素 。 
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口 document .getElementByID() : 按 ID 属性 检索 元 素 。 

口 document.getElementsByTagName() : 检索 具有 特定 标签 名 称 ( 如 a、div、p ) 的 所 有 元 素 。 
口 document.getElementsByClassName(): 检索 具有 特定 CSS 类 的 所 有 元 素 。 

口 document.querySelectorAl1(): 该 函数 与 jQuery 的 选择 咒 引 苟 的 作用 基本 相同 。 














让 我 们 继续 探索 一 下 document.querySelectorAl1()， 因 为 它 可 能 是 在 没有 jQuery 帮助 的 情况 
下 ， 选 择 元 素 的 有 力 武器 。( 该 函数 性 能 高 效 ， 被 各 种 浏览 器 广泛 支持 。) 就 像 jQuery 元 素 选择 屁 
的 语法 一 样 ， 只 需要 将 一 个 CSS 选 择 器 〈 即 在 样式 表 中 用 来 选择 目标 元 素 的 选择 器 ) 传人 
querySelectorAl1， 然 后 所 有 匹配 的 元 素 就 会 以 一 个 数组 的 形式 返回 。 











document.querySelectorAll("body"); // 获取 body 元 素 
document.querySelectorAll(".squares"); // 获取 所 有 "square" 类 的 元 素 
document.querySelectorAll("div"); // 获取 所 有 div 
document.querySelectorAll("#main"); // 获取 id 为 "main" 的 元 素 
document.querySelectorAll("#main div"); // 获取 "main" 中 所 有 的 div 





如 果 将 其 中 一 个 查询 的 结果 分 配给 某 个 变量 , 那么 就 可 以 重新 使 用 这 个 变量 来 设置 目标 元 素 
的 动画 了 。 








// 获取 所 有 div 元 素 

var divs = document.querySelectorAll("div"); 
// 设置 所 有 div 的 动画 

Velocity(divs，{ opacity: 0 }, 1000); 











既然 不 能 再 使 用 jQuery 元 素 对 象 ， 那 么 你 可 能 想 知 道 怎样 才能 把 一 个 个 动画 像 下 面 这 样 链 
起 来 。 











// 这 些 动 画 一 个 链 一 个 

$element 
.velocity({ opacity: 0.5 }, 1000) 
.velocity({ opacity: 1 }, 1000); 


要 想 在 没有 jQuery 的 情况 下 重新 实现 这 种 操作 ， 只 需要 一 个 接 一 个 地 调用 动画 即 可 。 
// 同一 元 素 上 的 动画 会 自动 链 在 一 起 


Velocity(element，{ opacity: 0 }, 1000); 
Velocity(element，{ opacity: 1 }, 1000); 
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2.7 小 结 





现在 你 已 经 了 解 了 使 用 JavaScript 开 发 网 页 动画 的 优势 ， 还 掌握 了 一 些 Velocity 的 基本 知识 ， 
你 已 经 有 了 充分 准备 ， 可 以 继续 探索 专业 动 效 设计 那 令 人 着 迷 的 理论 基础 了 。 


第 .月 章 
动 效 设计 理论 





实用 和 优雅 是 每 一 位 优秀 动 效 设计 师 追 求 的 目标 ， 而 本 章 探 
索 了 实现 这 些 目标 的 几 个 技巧 。 由 于 此 处 的 焦点 在 于 动 效 设计 理 
论 而 非 实 施 ， 因 此 并 没有 代码 实例 。 不 论 使 用 的 是 何 种 语言 、 设 
备 或 平台 ， 都 可 以 宽泛 地 概括 出 这 些 技巧 。 
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3.1 动 效 设 计 提 升 用 户 体验 


让 我 们 先 来 研究 动 效 设计 这 个 词组 : 设计 动 效 就 是 决定 一 个 对 象 的 哪些 视觉 属性 应 该 发 生 改 
变 , 应 该 以 何 种 速度 发 生 改变 。 例如， 想 要 通过 改变 颜色 让 用 户 注 意 到 一 个 按钮 ， 你 也 许 会 改变 
其 背景 颜色 ， 在 1000 上 毫秒 的 时 间 里 从 红色 变 成 蓝 色 ， 使 用 ease-in-out( 先 加 速 后 减速 ) 的 缓 动 
类 型 。 在 此 例 中 ，background-color 就 是 目标 属性 ; 红色 就 是 理想 的 结束 值 ; 该 属性 向 结束 值 过 
渡 的 持续 时 间 为 1000 毫 秒 ， 由 ease-in-out 绥 动 类 型 决定 了 其 加 速度 曲线 。 优 秀 的 动 效 设计 师 选 
择 其 中 每 一 项 都 经 过 了 深思 熟 虑 , 这 不 是 因为 它们 看 起 来 漂亮 或 者 符合 流行 趋势 ,而 是 因为 它们 
强化 了 UI 的 意图 。 与 之 相反 的 是 那些 拍 脑袋 做 出 的 动 效 设计 , 不 仅 不 伦 不 类 而 且 也 不 雅 观 , 会 分 
散 用 户 注意 力 。 











讨论 UI 设计 的 教程 成 百 上 千 , 但 讨论 动 效 设计 的 却 凤 毛 脱 角 。 这 也 并 不 奇怪 ,因为 对 于 网 页 
而 言 ,， 动 效 设 计 没有 UI 设计 那么 重要 。 直 到 最 近 , 浏览 顺和 设备 的 速度 才 足 够 快 ,， 足以 撑 起 丰富 
的 动 效 设计 。 但 是 在 UI 设计 为 页 面 互动 架 起 结构 化 基础 的 同时 , 动 效 设计 也 丰富 了 这 一 基础 , 它 
通过 装备 和 装饰 页 面 使 其 更 加 易 用 和 舒适。 其 中 “装备 ”就 是 动 效 设计 提供 的 实用 性 , “装饰 ” 
就 是 优雅 美观 。 


EA 下 
要 么 优雅 ， 


要 么 死路 
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优秀 的 移动 应 用 不 仅 实用 而 且 优 雅 , 使 用 户 感觉 像 是 在 与 一 个 有 生命 、 会 呼吸 、 触 手 可 及 的 
界面 进行 交互 。 如 果 界 面 对 用 户 的 反应 就 像 真 实 世 界 中 那样 ， 那 么 用 户 参 与 互动 就 会 更 加 投入 。 
与 之 相反 , 没有 任何 动 效 设计 的 页 面 总 是 提醒 着 用 户 , 她 只 是 在 将 鼠标 拖 过 屏幕 或 者 只 是 在 一 片 
玻璃 上 获 着 手指 头 。 没 有 动 效 设计 的 UI， 只 会 让 用 户 痛苦 而 无 法 入 戏 。 





















































动 效 设计 的 实用 性 利用 的 是 用 户 心 理 。 当 用 户 按 下 一 个 按钮 时 , 她 是 否 确信 这 个 按 下 的 动作 
已 经 被 UI 认 出 了 ? 有 一 个 简单 的 方法 使 她 放心 , 那 就 是 设置 一 个 按钮 过 渡 到 按 下 状态 的 动画 。 当 
用 户 等 待 内 容 加 载 时 , 她 是 明确 知道 进度 仍 在 继续 还 是 有 一 种 应 用 已 经 僵 住 的 不 详 感觉 ?” 动 效 设 
计 可 以 提供 当下 UI 状态 的 视觉 提示 ， 从 而 作用 于 人 们 的 心理 预期 。 










































































优雅 的 动 效 设计 则 是 锡 上 添 花 , 它 能 够 让 应 用 从 仪 是 看 上 去 很 好 升格 为 感觉 上 很 好 。 这 正 是 
使 人 情不自禁 发 出 赞叹 的 地 方 ， 因 为 它 让 用 户 意识 到 技术 拥有 多 么 强大 的 魔力 。 








证 我 们 同时 掌控 实用 与 优雅 。 同 我 一 起 继续 深入 了 解 吧 。 


3.2 


将 


用 


怎样 才能 确定 添加 的 动 效 设计 对 网 站 而 言 是 有 价值 的 ? 这 里 有 几 个 技巧 。 


3.2.1 借鉴 惯例 


让 你 最 喜爱 的 网 站 或 应 用 上 的 动 效 设计 为 你 提供 灵感 。 流 行 的 动 效 设计 惯例 是 值得 一 用 的 ， 
原因 在 于 它们 在 用 户 脑 中 已 经 形成 国定 含义 。 这 些 惯 例 一 次 又 一 次 暴露 在 用 户 面前 , 使 他 们 对 某 
些 特定 动画 “应 当 ” 怎 样 形成 了 预期 。 如 果 你 使 用 惯例 做 法 的 目的 与 用 户 原本 预期 的 不 同 ， 人们 
就 会 感觉 你 的 应 用 不 够 直观 。 
































从 别处 借鉴 的 动 效 设 计 效 果 越 多 ,你 的 应 用 给 人 的 感觉 就 越 熟 悉 。 而 人 们 对 应 用 越 熟悉, 就 
能 越 快 地 适应 它 并 对 使 用 它 充满 自信 。 尽 管 确实 有 些 实用 工具 很 新 络 , 但 日 常 UI 元 素 的 动 效 设计 
不 应 该 是 新 颖 的 。 而 如 果 动 画 本 身 含义 很 浅显 ， 比 如 页 面 加 载 顺 序 动画 ， 或 者 不 太 会 产生 误解 ， 
比如 状态 指示 器 动画 ,那么 请 保留 动画 的 新 颖 性 。 











3.2.2 ”预览 结果 


当 页 面 上 的 某 个 元 素 看 上 去 目的 不 太 明确 时 , 请 为 用 户 提供 交互 结果 的 预览 。 这 样 做 可 以 确 
保 元 素 像 用 户 所 认为 的 那样 行动 。 一 个 简单 的 例子 就 是 文件 传输 按钮 ， 当 鼠标 悬浮 其 上 时 会 发 出 
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像 是 无 线 电波 脉冲 的 视觉 效果 。 这 种 做 法 利用 了 常见 的 图 形 设计 喻 义 , 告诉 用 户 点 击 按钮 后 数据 
传输 就 会 开始 。 


























另 一 种 不 那么 隐 了 上 的 预览 方式 是 显示 用 户 采 取 行 动 之 后 会 发 生 的 部 分 动画 效果 。 例如, 如果 
用 户 点 击 按钮 ,表示 正在 进行 的 文件 传输 指示 需 动 画 就 开始 运行 ,那么 可 以 采用 这 样 的 动 效 设计 ， 
当 鼠 标 悬 停 在 触发 元 素 上 面 时 就 部 分 运行 传输 进行 时 的 动画 。 当 用 户 将 鼠标 从 元 素 上 移 开 时 , 就 
反 转 刚刚 发 生 的 部 分 动画 , 使 文件 传输 指示 器 回 到 默认 状态 。 这 种 预览 技巧 帮助 用 户 马 上 了 解 她 
的 行为 将 要 触发 的 结果 , 同时 也 帮助 她 确认 了 UI 元 素 的 目的 。 用 户 越 是 感到 自信 , 就 越 有 掌控 感 ; 
而 她 越 有 掌控 感 ， 体 验 就 越 愉悦 。 























3.2.3 无聊 时 的 消遣 


当 用 户 在 页 面 上 进行 机 械 性 的 、 毫 无 参与 感 的 操作 时 〈 比如 在 填写 长 长 的 表单 时 )， 可 以 使 
用 颜色 和 动画 让 她 提 提 神 ， 增添 点 兴趣 。 例 如 ， 可 以 在 她 成 功 填写 每 个 表单 字段 后 , 设置 一 个 复 
选 标记 的 动画 。 这 会 让 用 户头 脑 与 界面 保持 表面 上 的 互动 ， 减 少 完成 当前 任务 的 无 聊 感 。 同 理 ， 
当 用 户 等 待 内 容 加 载 时 ， 可 以 显示 一 个 吸引 眼球 的 加 载 指示 器 。 一 个 绝 佳 的 例子 来 自 名 为 Lyft 的 
流行 拼车 应 用 。 当 该 应 用 加 载 至 内 存 时 ， 在 空白 画布 上 会 有 个 气球 有 节奏 地 上 下 浮动 。 


























让 用 户 的 头脑 放松 并 感受 这 种 重复 运动 带 来 的 愉悦 , 这 可 以 使 她 对 你 的 内 容 更 感 兴趣 。 不 管 
这 看 上 去 多 么 肤浅 , 它 确 实 奏效 。 但 要 意识 到 ,这 种 技巧 只 能 用 于 用 户 将 无 可 避免 地 感到 一 段 乏 
味 的 情况 。 不 要 随意 把 它 当 创可贴 用 ， 每 当 想 给 UI 加 点 料 时 就 贴 上 一 贴 ， 只 会 坏事 。 








让 我 们 考虑 另外 一 个 例子 : 当 Facebook 往 动态 消息 里 加 载 文 字 内 容 时 , 它 先 让 一 段 虚 拟 文字 
时 而 模糊 时 而 清晰 地 反复 运动 ， 直至 真正 的 文字 显示 出 来 。 这 种 有 节奏 的 模糊 动画 不 仅 表明 界面 
正在 努力 工作 ( 而 不 是 卡 住 了 )， 而 且 还 明确 告诉 用 户 她 在 等 待 的 是 UI 的 哪 一 部 分 内 容 。 这 种 技 
巧 被 称 为 行内 状态 指示 。 请 将 这 种 技巧 与 无 处 不 在 的 单 状 态 指 示 器 进行 比较 , 后 者 在 网 页 一 出 现 
时 就 存在 了 : 它 就 是 一 个 单一 的 、 不 断 循环 的 动态 图 片 , 加 在 一 个 空空 如 也 、 令 人 不 适 的 空白 页 
面 上 。 用 户 已 经 对 此 厌倦 了 。 与 之 相反 , 行内 状态 指示 让 你 尽 可 能 多 地 显示 界面 内 容 ， 只 把 等 待 
内 容 加 载 的 特定 区 块 屏蔽 起 来 即 可 。 这 种 做 法 不 仅 更 细致 , 也 提供 给 用 户 更 多 内 容 , 让 她 在 转 着 
大 拇指 等 待 页 面 全 部 加 载 时 ， 有 内 容 可 看 。 

































































这 里 的 诀窍 很 简单 :给 用 户 参 与 的 内 容 越 多 ， 他 们 就 越 不 容易 感到 厌倦 。 
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3.2.4 用 本 能 反应 


人 脑 有 一 个 区 域 专门 用 于 视觉 处 理 。 不 论 我 们 愿意 不 愿意 , 在 面 对 突然 运动 时 都 会 作出 反应 ， 
这 是 我 们 的 本 能 。 所 以 ,如 果 页 面 上 有 个 重要 行为 需要 用 户 马上 关注 , 可 以 考虑 使 用 运动 来 提请 
注意 。 有 一 种 提醒 用 户 的 常见 做 法 ， 即 通过 重复 地 上 下 移动 ， 让 元 素 好 像 在 “跳动 ”一 样 。 这 种 
做 法 与 设置 元 素颜 色 的 动画 截然 不 同 , 因为 后 者 并 没有 作用 于 人 的 本 能 , 我 们 生存 的 内 在 机 制 并 
不 认为 颜色 的 改变 值得 我 们 本 能 地 立即 予以 关注 。( 然而 ， 在 许多 国家 中 ， 由 于 特定 颜色 反复 出 
现 ， 人 们 被 训练 得 见 到 红色 就 理解 为 “停止 "， 见 到 绿色 就 理解 为 “前 进 ”"。 这 说 明 社 会 活动 可 以 
强化 某 种 意义 。 有 鉴于 此 ， 当 我 们 在 设计 动 效 时 ， 可 以 将 这 一 点 考虑 在 内 。) 



































再 深入 挖掘 一 点 儿 人 的 心理 , 用 户 将 靠近 自己 的 运动 理解 为 需要 马上 行动 的 紧急 提示 , 而 将 
远离 自己 的 运动 理解 为 与 自己 无 关 ， 因 此 也 就 不 必要 采取 行动 。 





3.2.5 ”使 人 对 互动 充满 欲望 


如 果 按 钮 有 丰富 的 渐变 色彩 而 且 又 大 又 软 ， 这 就 使 用 户 想 去 按 它 。 像 这 样 的 元 素 在 点 击 时 ， 
会 产生 愉悦 感 ， 一 方面 是 按压 带 来 的 满足 ， 另 一 方面 是 绚丽 的 色彩 赏心悦目 。 在 此 例 中 可 以 学 到 
一 个 刺激 用 户 互动 的 诱因 : 点 击 按钮 越 吸引 人 ,用 户 就 越 会 这 样 做 。 充 分 利用 这 一 现象 ,在 想 让 
用 户 采 取 重 要 行动 时 发 挥 作用 ， 比 如 注册 新 账户 的 按钮 ， 或 者 对 购物 篮 里 的 货物 结账 的 按钮 。 











3.2.6 ”体现 重要 性 


如 果 用 户 行为 会 带 来 无 法 逆转 的 结果 , 请 使 用 感觉 上 同等 重要 的 动 效 设计 来 强调 这 一 点 。 例 
如 , 点 击 删除 按钮 的 动画 要 比 鼠 标 悬 停 在 普通 导航 下 拉 列 表 上 的 动画 给 人 更 重要 的 感觉 。 后 者 可 
能 只 需要 简单 的 颜色 变化 ,但 前 者 也 许 就 要 包含 按钮 尺寸 突然 放大 和 元 素 边框 加 粗 的 双重 效果 。 
根据 互动 行为 的 重要 程度 区 分 动 效 设计 , 这 会 帮助 用 户 直观 地 了 解 可 采取 行动 的 重要 性 。 这 一 技 
巧 ， 连 同 本 章 详 述 的 其 他 技巧 ， 都 旨 在 提升 用 户 的 理解 与 自信 。 


















































3.2.7 减少 同时 发 生 的 动画 

从 某 种 意义 上 说 , 用 户 总 是 在 试图 理解 你 的 UI。 不论 是 有 意识 还 是 无 意识 , 他 们 会 认为 你 所 
选择 的 每 一 个 设计 和 动画 都 有 其 意图 。 因 此 ， 如 果 给 用 户 看 了 大 量 动 画 ， 其 中 许多 元 素 同 时 在 眼 
前 运动 ， 这 其 实 会 削弱 她 对 所 有 这 些 运动 的 意义 的 理解 。 














简 而 言 之 , 如 果 使 用 动 效 设计 来 强调 某 件 事情 的 重要 性 , 务必 不 要 一 次 强调 太 多 不 同 的 东西 。 
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如 果 确 实 有 很 多 需要 强调 ， 考 虑 让 动画 一 步 一 步 地 显示 或 者 减少 动画 的 总 数量 。 





3.2.8 ”减少 动画 种 类 


上 面 讲 到 减少 同时 发 生动 画 的 数量 这 一 最 佳 实践 做 法 , 与 此 相关 的 还 有 减少 动画 种 类 : 使 用 
的 动画 种 类 越 少 ,就 越 能 确保 用 户 充分 理解 UI 上 每 个 动画 的 含义 。 例如 ,如果 使 用 了 一 种 动画 将 
大 幅 图 片 呈 现在 眼前 , 但 使 用 了 男 一 种 动画 来 呈现 小 图 片 , 那么 请 考虑 将 两 种 合 二 为 一 。 如 果 原 
本 区 分 动画 仅 是 为 了 审美 考虑 而 没有 提升 实用 性 , 那么 去 掉 一 种 就 会 让 你 成 功 降低 UI 上 不 必要 的 
复杂 性 , 而 且 在 这 个 过 程 中 也 强化 了 行为 的 一 致 性 。 一致 性 带 来 模式 识别 和 理解 ,理解 义 能 增强 
用 户 的 自信 心 。 






































3.2.9 ”镜像 动画 


与 限制 动画 种 类 有 那么 点 儿 关 系 的 还 有 选择 动画 属性 和 选项 组 合 的 一 致 性 。 例如 ,如 果 有 个 
模 态 窗口 是 通过 过 渡 opacity 和 scale 这 两 个 属性 显示 出 来 的 ， 那 么 请 确保 在 模 态 窗口 隐藏 时 ， 也 
是 通过 将 这 两 个 属性 恢复 到 初始 值 来 实现 。 这 两 者 就 好 像 是 同一 硬币 的 两 面 , 其 动 效 的 属性 不 应 
有 区 别 。 因 为 一 旦 动 效 的 属性 发 生 了 改变 , 用 户 就 会 有 疑问 ,究竟 是 什么 导致 了 这 种 不 同 ? 而 产 
生 这 种 不 必要 的 疑问 正 说 明 用 户 体验 欠 佳 。 












































处 理 与 平移 相关 的 属性 时 ( 例如，CSS 中 的 translateX、left 和 marginLeft )， 必 须要 一 丝 不 
区 地 执行 镜像 动画 : 如 果 模 态 窗口 通过 从 页 面 项 部 下 滑 的 运动 方式 进入 视图 , 那么 它 离开 视图 就 
应 通过 向 上 滑 回 顶部 的 运动 方式 实现 。 反 之 , 如 果 通 过 继续 向 下 滑 出 页 面 让 模 态 窗口 离开 视图 的 
话 ， 你 对 用 户 传达 的 意思 是 它 被 送 到 了 一 个 新 去 处 ， 而 非 回 到 它 原 本 的 老 地 方 。 通 常情 况 下 ， 如 
果 用 户 完成 了 某 种 操作 ， 比 如 更 改 了 账户 设置 ， 你 想 表达 的 就 是 模 态 窗口 回 到 它 之 前 来 的 地 方 。 
然而 ,如 果 用 户 是 发 送 邮 件 , 那么 让 模 态 窗口 下 滑 出 页 面 就 适合 该 场景 ， 因 为 它 强化 了 这 样 一 个 
意思 : 邮件 从 原来 的 地 方 〈 用 户 ) 被 送 到 了 新 地 方 ( 收 件 人 )。 





































































































3.2.10 ”限制 持续 时 间 

设计 师 经 常 犯 这 样 一 个 错误 ,就 是 让 动画 的 持续 时 间 过 长 ， 从 而 造成 用 户 不 必要 的 等 待 。 永 
远 不 要 让 UI 上 花 里 胡 哨 的 东西 拖 慢 页 面 的 显示 速度 。 如 果 在 一 捉 动 画 序列 中 , 有 许多 内 容 要 淡 入 
视图 ， 那 么 请 确保 整个 动画 序列 总 共 的 持续 时 间 很 短 。 



































同 理 , 如果 UI 中 有 一 部 分 (比如 头像 ) 由 于 用 户 与 页 面 的 交互 方式 , 需要 频繁 地 渐变 进入 或 
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离开 视图 , 那么 就 要 格外 小 心 , 不 要 让 动画 的 持续 时 间 过 长 。 第 一 次 看 到 一 段 动 效 设计 感觉 固然 
很 好 , 但 如 果 用 户 每 次 与 移动 应 用 交互 时 都 要 看 上 好 几 遍 ， 那 很 快 就 会 让 人 厌烦 了 ,尤其 是 当 用 
户 要 反复 等 待 动 画 播放 完毕 的 情况 ， 因 为 他 们 感觉 这 显著 拉 长 了 整个 UI 的 等 待 时 间 。 











测试 时 要 看 动画 播放 几 十 次 ， 之 后 要 确定 动画 持续 时 间 是 否 合适 是 比较 困难 的 。 有 鉴于 此 ， 
有 一 条 很 好 的 经 验 法 则 可 以 借鉴 ， 那 就 是 在 正式 发 布 网 站 之 前 ,将 所 有 动画 的 速度 加 快 25%。 这 
会 确保 动画 总 是 倾向 于 快 一 点 播放 。( 请 参见 第 4 童 中 的 小 窍门 : 如 何 快速 让 动画 进行 时 间 平 移 。 ) 


3.2.11 ”限制 动画 


如 果 将 某 个 动画 整个 移 除 不 会 影响 用 户 理解 界面 , 那么 请 考虑 将 它 去 掉 , 用 样式 的 瞬时 变化 


来 替代 。 整 个 UL 上 的 动画 越 多 , 用 户 就 对 它们 越 习以为常 。 用 户 越 习以为常 , 就 越 不 会 注意 它们 ， 
进而 就 不 太 可 能 区 别 不 同 动 效 设计 类 型 的 差异 以 及 每 种 类 型 所 代表 的 意义 。 





动 效 设计 中 的 绝 大 多 数 动 效 都 应 该 是 很 微妙 的 , 例如 ， 鼠 标 悬 停 时 颜色 仅 发 生 轻微 变化 ， 因 
此 仅 存 的 极 少 数 大 手笔 动 效 设计 就 应 当 夺 人 眼球 ， 传 达 它 们 预定 的 信息 。 
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3.3 ”优雅 


华而不实 与 富有 意义 的 动 效 设 计 ， 两 者 间 的 分 界线 很 容易 分 辨 , 即 : 看 这 段 动 效 设 计 是 否 
符合 第 3.2 节 中 谈 到 的 最 佳 实践 之 一 ”如 果 不 符合 ， 请 把 它 去 掉 ， 因 为 它 华而不实 ， 有 损 UI 的 易 
用 性 。 











3.3.1 不 要 华而不实 


要 锻炼 识别 华而不实 的 能 力 , 请 把 最 流行 的 应 用 下 载 下 来 ,每 一 个 都 持续 彻底 地 玩 一 玩 ， 然 
后 判断 它们 的 动画 特色 比 自己 应 用 中 的 更 鲜明 还 是 更 不 鲜明 。 密切 关注 每 个 动画 传达 的 意义 及 其 
理由 。 如 果 你 感觉 这 些 应 用 中 使 用 动画 的 程度 远 远 低 于 自己 的 应 用 , 那么 就 要 考虑 将 你 的 UI 中 的 
动 效 设计 调整 得 更 缓和 一 些 。 




































































但 是 ,“ 不 要 华而不实 ”这 一 金 科 玉 律 也 有 个 例外 情况 ， 欲 知 详情 ， 请 继续 往 下 读 ! 





3.3.2 ”了 唯一 华而不实 的 机 会 


页 面 加 载 , 即 所 有 元 素 从 初始 的 不 可 见 状 态 直 至 以 动画 方式 进入 视图 中 这 段 时 间 , 是 你 唯一 
一 次 可 以 使 用 出 格 且 华而不实 的 动画 的 时 机 。 为 什么 ?因为 这 样 的 加 载 只 发 生 一 次 , 不 会 在 用 户 
与 网 站 交互 时 反复 出 现 、 碍 手 碍 脚 。 同时 ,这 也 是 你 发 挥动 效 设 计 技巧 , 使 网 站 给 人 留 下 深刻 第 
一 印象 的 时 机 。 


























如 果 针 对 内 容 如 何以 动画 方式 进入 视图 ,你 已 经 有 了 绝 佳 的 点 子 , 那 就 用 在 这 里 。 但 是 , 务 
必 确 保 遵 守 本 章 中 所 有 其 他 规则 ， 尤 其 是 限制 持续 时 间 这 一 条 。 





3.3.3 考虑 个 性 化 


如 果 要 设计 一 个 公司 网 站 ， 就 不 能 用 反弹 效果 让 元 素 跳 着 出 现 ， 因 为 反弹 效果 很 顽皮 ， 而 这 
通常 不 是 一 个 公司 想 要 传递 的 品质 。 如 采 要 设计 一 个 教育 或 政府 应 用 ， 就 不 能 用 那 种 开始 很 快 、 
结尾 很 慢 的 缓 动 效果 ( 这 些 效果 给 人 一 种 于 面前 疾驰 而 过 的 、 充 满 未 来 感 的 光滑 感 )， 可 能 对 于 
眼前 的 内 容 而 言 ， 这 些 效 果 太 炫 大 时 艇 了 。 
































在 选择 动画 时 , 要 时 刻 考 虑 它们 所 表达 的 个 性 化 特点 。 作 为 设计 师 , 你 很 难 判断 自己 作品 的 
格调 , 因此 请 第 三 方 尽早 且 时 常 地 给 予 反 馈 是 个 不 错 的 主意 。 询问 测试 用 户 你 的 UI 是 否 给 入 以 恰 
当 的 专业 感 、 亲 切 感 或 时 尚 感 ， 根 据 你 对 其 中 每 种 特质 的 仿 好 ， 调 整 动 效 设计 。 
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3.3.4 不 要 拘泥 于 不 透明 度 动画 


让 元 素 过 渡 进 入 视图 的 最 常用 方式 是 设置 opacity 属 性 从 0 变动 至 1 的 动画 ， 而 让 元 素 过 渡 离 
开 视 图 的 最 常用 方式 是 设置 opacity 属 性 从 1 变动 至 0 的 动画 。 总 是 这 么 做 会 很 无 趣 。opacity 只 是 
在 显示 或 隐藏 内 容 时 要 设置 动画 的 基本 属性 ,并 不 是 唯一 属性 。 可 以 灵活 选择 动画 的 属性 , 例如 
通过 缩小 元 素 让 其 显示 在 视图 内 、 通 过 向 上 滑动 而 划 出 视图 ， 或 通过 改变 元 素 的 背景 颜色 实现 。 
在 向 动画 添加 更 多 的 属性 时 ， 请 考虑 使 用 多 步 效 果 ， 你 会 从 下 一 个 技巧 中 学 到 相关 的 知识 。 











































































































3.3.5 ”将 动画 拆 分 为 多 步 


要 让 动 效 设计 显得 专业 ， 最 简单 的 方法 就 是 把 动画 拆 分 为 多 步 效 果 。 例 如 ， 如 果 通 过 将 
opacity 属 性 和 scale 属 性 从 0 变动 至 1 来 显示 一 幅 图 片 ， 那 么 请 考虑 先 设置 元 素 的 opacity 属 性 从 0 
变动 至 0.5( 也 就 是 最 终 值 的 一 半 ) 的 动画 ， 然 后 设置 scale 属 性 从 0 变动 至 1 的 动画 ， 同 时 设置 
opacity 属 性 从 0.5 变 动 至 1 的 动画 。 像 这 样 根据 属性 将 动画 拆 分 为 多 步 ,， 就 避免 了 网 络 上 大 多 数 业 
余 动 效 设计 中 常见 的 线性 变化 的 感觉 ， 因 为 在 那些 动画 中 ,所 有 属性 都 完全 是 同时 进行 的 。 在 现 
实 世 界 里 , 处 于 运动 中 的 物体 的 各 个 属性 并 不 都 是 同步 加 速 的 : 想像 一 下 当 小 鸟 在 飞 的 时 候 , 它 
是 怎样 运动 的 。 它 向 前 移动 ( translateX ) 的 速度 与 它 上 下 移动 (translateY ) 的 速度 是 不 同 的 。 
如 果 从 X 轴 和 Y 轴 上 同时 线性 运动 ， 那 么 看 上 去 就 更 像 一 颗 子 弹 而 不 是 一 只 动物 了 。 优 秀 的 动 效 
设计 借鉴 的 是 有 生命 、 可 呼吸 的 对 象 的 运动 方式 ， 这 是 因为 UI 是 为 人 类 ( 而 不 是 机 右 ) 设计 的 ， 
而 人 喜欢 感受 情感 和 反应 。 














































































































如 果 留 心 电 影 中 所 描绘 的 未 来 主义 的 UI 动画 , 你 会 注意 到 那些 复杂 的 多 步 动 画 是 使 它们 看 上 
去 如 此 平滑 流畅 的 关键 。 原因 很 简单 ， 而 且 这 也 进一步 说 明了 为 什么 要 避免 线性 感觉 人 类 被 多 
样 性 和 反差 所 吸引 。 想 一 下 ,在 拆 分 一 个 动画 的 时 候 , 是 怎样 将 该 动画 的 每 个 部 分 放 在 一 起 对 比 
的 。 就 好 像 把 层 层 衣 服 益 在 一 起 , 创造 出 愉悦 的 色彩 和 触感 组 合 ， 也 应 该 把 动画 从 加 在 一 起 , 创 
造 愉悦 的 动 效 设计 组 合 。 




















想 了 解 关 于 实施 多 步 效 果 的 技巧 ， 请 阅读 第 4 章 。 





3.3.6 ”错开 动画 

如 果 有 多 个 兄弟 元 素 需要 在 同一 时 间 显 示 出 来 , 例如 图 库 中 的 一 系列 图 片 , 请 考虑 为 它们 依 
次 添加 短暂 的 延迟 。( 也 就 是 说 ， 在 第 一 幅 图 片 加 载 后 和 第 二 幅 图 片 加 载 前 出 现 延 迟 ， 然 后 以 此 
类 推 。) 像 这 样 延 迟 兄 弟 元 素 的 动画 被 称 为 错开 动画 〈staggering )， 其 目的 与 前 面 讲 到 的 拆 分 动 
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画 类 似 : 如 果 所 有 元 素 都 完全 同步 运动 , 会 给 人 以 呆板 生硬 的 感觉 。 想 要 避免 这 种 情况 ， 可 以 使 
用 错开 动画 在 视觉 上 添加 层次 感 。 为 什么 会 这 样 ? 因为 同步 运动 一 系列 元 素 缺 少 类 似 颗 粒 的 灵活 
与 渐变 的 感觉 。 试想 一 下 , 鸟 儿 飞 翔 的 时 候 不 会 并 排 成 一 条 直线 ,它们 的 飞行 看 起 来 如 此 优美 就 
是 因为 它们 逐次 改变 队 形 ， 错 开 了 时 间 。 正 是 它们 的 编队 及 其 动态 变化 使 它们 在 人 类 有 眼中 如 此 
优雅 。 


























3.3.7 ”从 触发 元 素 处 产生 动画 

如 果 点 击 按钮 会 让 一 个 模 态 窗口 显示 出 来 , 那么 请 让 窗口 从 这 个 按钮 的 位 置 以 动画 方式 显示 
出 来 。 换言之 , 让 动画 从 触发 它们 的 元 素 那 里 产生 出 来 。 这 么 做 会 在 UI 中 连接 因果 关系 ,使 每 个 
元 素 都 适 得 其 所 。 














为 了 理解 这 一 技巧 带 来 的 心理 上 的 舒适 感 , 请 考虑 真实 世界 中 的 运动 : 在 拉 杠 杆 的 时 候 , 一 
系列 机 械 零件 导致 与 之 相连 的 物体 开始 运动 。 在 这 里 ,“ 相 连 ” 是 关键 词 ， 真 实物 体 只 有 在 有 力 
量 作用 在 它 上 面 时 才 会 运动 。 同 理 , 在 UI 中 , 要 把 每 个 元 素 视 为 可 以 施加 自身 力量 的 元 素来 对 待 ， 
这 一 点 非常 重要 。 每 个 动作 都 应 感觉 与 一 个 触发 器 相连 。 正 是 这 种 无 颖 的 感觉 帮助 界面 超越 了 数 
字 世 界 ， 来 到 物理 世界 。 界 面 越 符合 物理 原理 ， 就 越 给 和 人 有 回应 、 有 情感 的 感觉 。 









































3.3.8 ”使 用 图 形 


利用 可 缩放 矢量 图 形 ( SVG ) 可 设置 可 供 交 互 的 较 大 元 素 的 各 个 图 形 组 件 的 动画 ( 详 见 第 6 
章 )。 典 型 的 例子 就 是 三 条 横 线 操 在 一 起 构成 的 表示 菜单 的 “汉堡 ”图 标 ， 或 者 在 加 载 指示 器 中 
形成 一 个 圆圈 的 圆 点 。 在 这 些 例 子 里 , 任意 图 形 可 以 组 合 在 一 起 构成 一 个 常见 的 UI 组 件 。 在 网 页 
能 够 实现 SVG 动画 以 前 , 要 想 设置 上 述 两 种 图 形 的 动画 , 常见 做 法 是 把 整个 图 形 做 在 一 个 PNG 图 
片 里 面 , 将 该 图 片 甬 入 网 页 ,然后 通过 改变 CSS 中 的 opacity 属 性 值 来 设置 整个 图 片 的 动画 。 然 而 ， 
通过 利用 SVG， 可 以 设置 这 些 独 特 元 素 中 的 每 一 个 形状 的 动画 ， 还 可 以 设置 其 多 个 属性 的 动画 。 













































































图 形 运动 无 疑 会 为 UI 中 的 核心 位 置 带 来 别具一格 的 风采 , 其 中 一 部 分 原因 是 由 于 基于 网 页 的 
动画 主要 操作 的 是 实心 长 方形 。( 尽管 它们 有 时 候 有 圆 角 ,但 形状 仍 保持 实心 和 完整 。) 然而 , 通 
过 设置 元 素 中 的 各 个 形状 的 动画 ， 可 能 会 以 出 乎 想像 的 动 效 设计 ， 让 用 户 心满意足 。 

















除了 新 奇效 果 以 外 , 还 可 以 别具一格 地 利用 SVG 动画 将 一 种 形状 变换 为 另外 一 种 。 把 这 种 技 
巧 与 预览 结果 和 从 触发 元 素 处 产生 动画 结合 使 用 , 就 可 以 利用 图 形变 换 来 表示 UI 行为 以 及 为 用 户 
提供 的 反馈 。 例 如 ， 如 果 鼠 标 悬 停 在 加 载 指示 器 上 面 的 圆 点 上 ， 这 些 圆 点 就 会 重新 排列 形成 一 个 
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X 的 形状 ， 这 就 表示 用 户 点 击 这 个 状态 指示 图 形 就 会 取消 加 载 内 容 。 





为 每 个 动画 确定 正确 的 持续 时 间 、 错 开动 画 、 缓 动 效果 和 属性 组 合 ， 这 并 非 设 计 师 生 来 就 
具备 的 技能 。 这 一 技能 是 每 一 位 优秀 设计 师 必 须 学 习 的 。 因 此 , 请 记 住 : 你 第 一 次 尝试 的 动画 
属性 组 合 , 看 起 来 可 能 还 不 错 , 但 很 可 能 还 不 是 最 佳 效果 。 要 想 找到 最 佳 效果 ,只 有 两 种 方法 : 
一 是 反复 实验 ， 系 统 性 地 更 改动 效 设 计 中 的 每 一 个 因素 ， 直 至 突然 撞 到 一 个 超凡 脱俗 的 效果 ; 
二 是 从 别人 的 作品 中 借鉴 做 法 。 一 旦 找到 一 个 喜欢 的 效果 ,还 是 要 进一步 实验 ,即使 你 已 经 一 
丝 不 差 地 实现 了 别人 的 这 个 效果 。 考虑 是 否 要 将 持续 时 间 减 半 , 彻底 换 一 种 缓 动 类 型 或 者 更 换 
一 个 属性 。 

设计 师 经 常 反感 反复 持久 的 实验 ， 因 为 即使 要 把 一 个 按钮 动态 显示 出 来 也 有 上 百 万 种 做 
法 , 而 每 种 做 法 都 能 有 效 地 实现 手头 的 目的 : 让 按钮 显示 出 来 。 结果 , 一 旦 你 碰 到 一 个 属性 组 
合 构 成 的 动画 ,效果 还 不 赖 ,就 很 可 能 持续 用 它 ， 因 为 看 上 去 不 错 而 且 也 能 发 挥 作用 。 但 请 不 
要 忘记 ,“ 不 差 ” 并 不 是 一 个 值得 尊敬 的 设计 目标 ,“ 卓 越 ” 才 是 。 要 想 达 到 卓越 的 水 平 ， 必 须 
踏 出 舒适 区 ， 不 要 总 是 依赖 于 已 经 知道 的 那些 起 作用 的 设计 。 
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3.4 小 结 








实用 和 优雅 是 你 的 目标 。 所 有 动画 代码 最 低 限 度 也 要 达到 其 中 之 一 。 





当 运 用 得 当时 ， 动 画 代 码 会 为 UX 带 来 实 实在 在 的 价值 ， 而 且 不 会 对 网 站 的 性 能 带 来 负面 影 
响 。 不 论 动 效 设计 是 多 么 顺 滑 ， 如 果 运 行动 画 时 界面 显示 得 兢 克 绊 绊 , 那么 整个 用 户 体验 也 不 会 
优雅 。 在 第 7 章 中 ， 你 会 了 解 到 性 能 的 重要 性 。 


























大 多 数 网 站 上 的 动画 代码 简直 是 一 团 乱 麻 。 如 果 说 经 


的 动 效 设计 师 对 曾经 那个 古老 、 了 丑陋 的 Flash 时 代 还 有 什么 留恋 
话 ， 那 就 是 动 效 设计 的 结构 化 方式 了 。 


目前 想 要 结构 化 动画 代码 ， 有 两 方面 的 做 法 : 
引擎 


是 利用 动画 
(此 处 利用 Velocity.js ) 的 工作 流 特 ， Sh 洁 一 : 
是 使 用 代码 组 织 最 佳 实践 使 今后 的 修改 工作 变 和 


达意 ， 
得 更 容易 。 
不 要 再 深层 诅 套 JavaScript 回 调 函 数 ， 也 别 再 用 策 拙 的 CSS 动 


来 污染 样式 表 ， 跟 这 些 做 法 说 拜拜 吧 。 是 时 候 给 你 的 网 页 动画 
设计 开发 升 升级 了 。 
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4.1 CSS 动画 工作 流 




















为 了 能 够 更 好 地 管理 UI 动 画工 作 流 , 开发 人 员 有 时 会 放弃 JavaScript 而 转 用 CSS。 但 是 ,一 旦 
动画 的 复杂 度 达 到 了 中 等 或 更 高 水 平 , 那么 使 用 CSS 动 夯 通 常会 使 工作 流 变 得 明显 比 用 JavaScript 
更 加 糟糕 。 
































4.1.1 CSS 的 问题 


尽管 在 样式 表 中 少量 使 用 CSS 过 渡 效 果 是 很 方便 的 ,但 当 实 现 复 杂 的 动画 序列 时 ( 例如 ， 当 
要 求 所 有 的 元 素 在 页 面 加 载 时 顺 次 加 载 显示 出 来 时 )，CSS 动 画 代 码 就 难以 控制 了 。 























CSS 试 图 利用 关键 帧 来 解决 这 一 问题 ， 而 关键 帧 就 是 让 你 把 动画 逻辑 按照 各 自 独立 的 时 间 段 
分 离开 来 。 


@keyframes myAnimation { 
0% { opacity: 0; transform: scale(0, 0); } 
25% { opacity: 1; transform: scale(1, 1); } 
50% { transform: translate(100px, 0); } 
100% { transform: translate(100px, 100px); } 
} 


#box { animation: myAnimation 2.75s; } 





以 上 代码 设置 了 动画 时 间 线 上 几 个 分 隔 点 处 的 特定 属性 应 达到 的 值 。 然 后 , 将 该 动画 赋 给 ID 
为 #box 的 元 素 ， 并 且 设 置 了 整个 关键 帧 序列 全 部 完成 的 时 间 。 如 果 没 有 完全 明白 上 面 的 语法 ,不 
忧心 ， 在 本 书 中 不 会 用 到 它 。 但 在 继续 往 后 看 之 前 ,请 先 考虑 这 样 一 个 问题 ， 当 客户 要 求 你 把 
不 透明 度 (opacity ) 动画 时 长 增加 1 秒 , 但 是 其 他 属性 的 动画 持续 时 间 不 变 ， 会 发 生 什么 情况 ? 
要 想 实 现 这 一 需求 ， 必 须 重新 进行 运算 ,才能 使 各 百分比 处 的 属性 值 与 增加 1 秒 后 的 时 长 匹配 起 
来 。 这 绝 不 是 小 事 一 桩 ， 而 且 如 果 面 对 大 量 这 种 需求 ， 肯 定 是 难以 应 对 的 。 





























芭 














4.1.2 ”什么 时 候 用 CSS 比 较 明 智 

有 必要 说 明 , 在 实现 UI 动画 时 有 一 种 情况 应 当 使 用 CSS 而 不 是 JavaScript, 那 就 是 当 用 户 鼠 标 
县 停 在 元 素 上 时 触发 的 简单 样式 变化 。CSS 中 的 transition 可 以 极 好 地 实现 这 种 类 型 的 微 互动 ， 使 
你 仅 用 几 行 易 维 护 的 代码 就 能 完成 任务 。 




















使 用 CSS 时 ， 先 为 目标 元 素 定义 一 个 transition 值 ， 这 样 在 特定 CSS 属 性 发 生 改 变 时 ， 动 画 
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就 会 持续 预先 设 定好 的 时 长 。 


/* 当 这 个 div 的 Color 属 性 变化 时 ， 动 画 持 续 时 长 为 200 毫 秒 */ 
div { 
transition: color 200ms; 


} 


然后 ,按照 每 一 条 transition 规 则 , 设置 每 一 个 特定 的 CSS 属 性 应 当 变 动 到 的 值 ,在 此 以 hover 
为 例 ， 当 用 户 鼠 标 悬 停 在 div 上 时 ， 它 的 文字 颜色 将 会 变 成 蓝 色 。 


div:hover { 
color: blue; 


} 








这 样 就 完成 了 。 仅 仅 几 行 代 码 就 可 以 让 CSS 为 你 处 理 交 互 状态 : 当 用 户 将 鼠标 从 div 上 移 开 时 ， 
CSS 就 会 用 200 毫 秒 的 时 间 ， 将 文本 颜色 从 蓝 色 再 变动 回 之 前 的 颜色 。 


























好 代码 长 什么 样 ? 

好 代码 是 表意 性 的 ， 就 是 说 代码 的 目的 很 容易 理解 。 这 一 点 对 同事 、 对 自己 都 至 关 重 要 ， 
因为 不 仅 可 以 方便 同事 整合 你 写 的 “外 来 ”代码 , 还 能 在 今后 忘记 原本 使 用 的 方法 时 帮 你 一 把 。 
好 代码 同时 还 是 简洁 的 ， 就 是 说 用 尽 可 能 少 的 代码 行 数 来 完成 任务 ; 每 一 行 都 有 重要 目的 ,不 

能 被 随意 改写 。 最 后 ， 好 代码 还 应 是 易于 维护 的 ， 就 是 说 每 个 单独 的 部 分 都 可 以 更 新 ， 不 需要 
害怕 影响 整个 程序 。 





相 比 之 下 ， 要 实现 上 面 同样 的 效果 ，jQuery 的 代码 要 写成 下 面 这 样 。 


$div 
// 为 div 注 册 一 个 mouseover 事 件 ， 调 用 一 个 animation 闷 数 
.on("mouseover", function() { 
$(this).animate({ color: "blue" }, 200); 
}) 
// 当 用 户 和 鼠标 从 元 素 上 移 开 时 ， 将 文本 颜色 变动 回 黑色 
.on("mouseout", function() { 
// 注意 : 我 们 必须 记 住 原来 的 属性 值 (黑色 ) 才 行 
$(this).animate({ color: "black" }, 200); 
]); 























上 面 代码 虽然 看 起 来 不 那么 糟糕 ， 但 它 没有 充分 发 挥 JavaScript 提 供 的 无 限 逻 辑 控制 的 优势 。 
它 费 劲 地 做 了 原本 CSS 应 该 做 的 事 ， 即 在 用 户 交 互 的 同一 元 素 上 触发 无 需 逻 辑 控制 的 动画 。 原 本 
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可 以 在 CSS 中 用 更 少 、 更 表意 、 更 易 维护 的 代码 实现 的 事情 ， 却 用 JavaScript 实 现 。 更 糟 的 是 ， 虽 
然 使 用 了 JavaScript 的 功能 ， 但 却 没 有 从 中 得 到 任何 额外 好 人 处。 




















简 言 之 ， 如 果 能 很 容易 地 用 CSS 的 transition 来 设置 一 个 元 素 的 动画 ， 并 且 该 元 素 从 未 通过 
JavaScript 来 设置 动画 ( 意思 是 指 两 者 之 间 不 存在 潜在 冲突 )， 那 么 就 应 该 用 CSS 来 编写 该 动画 的 
代码 。 对 于 所 有 其 他 UI 动画 人 物 , 例 如 多 元 素 和 多 步骤 的 动画 序列 、 交 互 拖 搜 动画 等 , 用 JavaScript 
实现 则 是 上 选 。 
















































































让 我 们 继续 探索 JavaScript 提 供 的 绝 佳 工作 流 技巧 吧 


O 


4.2 代码 技巧 : 将 样式 与 逻辑 分 离 
这 第 一 条 技巧 会 为 工作 流 带 来 巨大 益处 ， 尤 其 是 对 于 团队 而 言 。 


4.2.1 一 般 做 法 


在 jQuery 动画 中 ， 常 见 的 做 法 是 通过 使 用 UI 扩展 插件 (jQueryULcom ) 在 元 素 上 设置 CSS 类 
的 动画 。 当 该 模块 加 载 后 , jQuery 的 addClass() 子 数 和 removeClass() 函 数 都 升级 为 支持 动画 效果 。 
例如 ， 在 样式 表 中 定义 了 下 面 这 样 一 个 类 。 


























.fadeInAndMove { 
opacity: 1; 
top: 50px; 

} 











然后 ， 可 以 在 目标 元 素 上 设置 这 个 类 的 CSS 属 性 ( 此 处 是 opacity 和 top ) 的 动画 ， 同 时 可 以 
规定 动画 的 持续 时 间 。 


// 设置 .fadeInAndMove 类 的 属性 的 动画 ， 持 续 时 间 为 1000 毫 秒 
$element.addClass("fadeInAndMove", 1000); 





























另 一 种 更 常用 的 jQuery 动画 是 用 第 1 章 中 使 用 的 语法 ,将 想 要 设置 动画 的 属性 写 到 $.animate() 
调用 中 。 





$element.animate({ opacity: 1, top: 50 }, 1000); 








以 上 两 种 操作 方式 的 结果 是 一 样 的 。 不 同 之 处 在 于 两 者 的 逻辑 分 离 方式 不 同 。 第 一 种 方式 将 


ai 
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样式 规则 写 在 了 CSS 样 式 表 中 ， 而 CSS 样 式 表 正 是 该 页 面 所 有 其 他 样式 规则 所 在 的 地 方 。 第 二 种 
做 法 将 样式 规则 和 负责 触发 动画 的 JavaScript 逻 辑 混 在 了 一 起 。 








第 一 种 方法 更 值得 推荐 ， 因 为 它 的 代码 组 织 得 清楚 灵活 ， 要 想 适当 更 改 样式 就 去 看 样式 表 ; 
要 想 适 当 更 改 逻 辑 就 去 看 JavaScript。CSS 样 式 表 的 存在 是 有 原因 的 ; 经 验 丰 富 的 开发 人 员 不 会 在 
HTML 中 添加 行内 样式 ， 因 为 那样 做 会 混淆 HTML ( 负责 结构 ) 和 CSS ( 负责 样式 ) 的 目的 ， 极 
大 地 增加 了 网 站 的 维护 难度 。 




















每 当 团 队 协 作 时 ， 开 发 人 员 和 设计 人 员 经 常 头 碰 头 地 尝试 同时 修改 同一 文件 。 这 种 情况 下 ， 
将 逻辑 分 离 出 来 的 价值 就 愈 发 凸显 出 来 。 








4.2.2 优化 做 法 


在 回顾 了 不 恰当 的 一 般 做 法 以 后 , 让 我 们 看 一 看 优化 的 做 法 。 将 处 理 动画 样式 的 逻辑 全 部 写 
到 一 个 专门 的 JavaScript 文 件 中 ( 如 style.js )， 而 不 是 写 到 专门 的 CSS 样 式 表 中 ， 这么 做 大 有 益处 ， 
而 且 经 常 是 以 JavaScript 为 中 心 的 动画 工作 流 的 最 住 方法 。 听 起 来 很 奇怪 , 对 不 对 ?也 许 吧 , 但 是 
这 么 做 的 效果 非凡 。 这 一 技术 利用 简单 传统 的 JavaScript 对 象 帮助 你 组 织 动 画 代码 。 


























举例 来 说 ， 你 的 stylejs 文 件 可 能 会 像 下面 这 样 。 


// 这 个 对 象 与 前 面 代码 示例 中 定义 的 CSS 类 等 同 
var fadeIn = { 
opacity: 1， 
top: "50px" 
}; 


你 的 script.js 是 用 来 控制 动画 逻辑 的 主要 JavaScript 文 件 ， 在 里 面 加 上 下 面 这 么 一 行 。 





// 将 已 命名 的 属性 对 象 传 入 Velocity 
$element.velocity(fadeIn, 1000); 


再 重 述 一 下 技术 要 点 : 在 你 的 style,js 文 件 中 , 定义 了 一 个 JavaScript 对 象 ， 该 对 象 的 内 容 是 你 
想 要 设置 动画 的 CSS 属 性 。 然 后 将 这 同一 个 对 象 作为 第 一 个 参数 传 到 Velocity 里 。 你 不 需要 在 这 里 
做 什么 复杂 的 事情 ， 只 是 把 对 象 保存 到 已 命名 变量 ， 然 后 将 这 些 变量 〈 而 不 是 将 原始 对 象 本 身 ) 
传 到 Velocity 中 。 









































注意 这 一 技术 也 同样 适用 于 jQuery 的 animate() 有 函数 。 


I 
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一 个 晕 无 痛 
苦 的 工作 流 


是 至 天 重要 
的 。 





使 用 JavaScript 而 不 是 CSS 来 分 离 逻辑 的 好 处 在 于 stylejs 文 件 具备 一 个 独 有 的 能 力 ， 那 就 是 定 
义 动画 选项 ， 而 不 仅仅 是 定义 动画 属性 。 指 定 某 个 选项 有 多 种 方式 : 其 中 一 种 是 将 两 个 成 员 属性 
指定 给 一 个 父 级 动画 对 象 , 并 且 你 要 为 该 父 级 动画 对 象 取 一 个 表意 的 名 字 。 对 象 上 的 第 一 个 属性 
用 于 定义 动画 的 属性 ; 第 二 个 用 于 定义 动画 的 选项 。 


这 样 ， 你 的 stylejs 文 件 就 会 像 下 面 这 样 。 


var fadeIn = { 
// p 代 表 “ 属 性 (properties) ” 
p: { 
opacity: 1， 
top: "50px" 
} 
// 0 代表 “选项 (options) ” 
Gs 
duration: 1000， 
easing: "linear" 
} 
}; 


4.2 代码 技巧 : 将 样式 与 远 辑 分 离 二 43 


在 script.js 文 件 中 ， 这 样 写 代码 。 


// 将 我 们 清楚 明了 又 可 复 用 的 动画 对 象 传 入 Velocity 函数 
$element.velocity(fadeIn.p, fadeIn.o); 





代码 既 漂 亮 又 干净 ,对 不 对 ? 浏览 代码 的 人 马上 能 明白 它 的 意图 , 而且 知道 去 哪里 修改 动画 


























辕 性 ， 那 就 是 到 style.js 文 件 中 去 找 。 男 外 ， 这 个 动画 的 目的 也 一 目 了 然 ， 因为 你 为 动画 对 象 起 了 


恰当 的 名 字 ， 因 此 你 知道 这 行 代码 是 要 将 一 个 对 象 淡 入 ( fadeIn ) 到 视图 中 。 再 也 不 用 在 脑子 里 
分 析 那 些 动 画 属性 来 判断 动画 的 目的 是 什么 了 。 











这 种 做 法 不 鼓励 为 一 个 页 面 上 的 各 个 动画 随意 设置 选项 , 因为 现在 有 一 堆 预 制 的 动画 对 象 可 











以 轻易 选用 。 结 果 充 


i 是 代码 更 精简 、 动 效 设 计 更 一 致 。 正 如 在 前 一 章 中 所 学 到 的 , 一致 性 是 优秀 








用 户 体 验 的 重要 特征 之 一 。 

















这 种 做 法 的 好 处 不 止 于 此 ,最 棒 的 是 它 能 够 完美 组 织 动画 的 各 种 交 体 。 例 如 ,通常 情况 下 会 
让 按钮 元 素 在 1000 毫 秒 内 淡 入 , 但 对 于 模 态 窗口 却 希 望 用 3000 毫 秒 来 淡 入 。 这 时 候 ， 只 需要 把 选 
项 对 象 一 分 为 二 ， 分 成 两 个 恰当 命名 的 变 体 即 可 。 


var fadeIn = { 
p: { 
opacity: 


1, 


top: "50px" 


dy 

// 选项 对 象 

oFast: { 
duration: 


变 体 一 : ”持续 时 间 较 快 


1000， 


easing: "linear" 


外 


// 变 体 二 : 持续 时 间 较 慢 


oSlow: { 
duration: 


3000， 


easing: "linear" 


} 
3 


// 设置 动画 使 用 较 快 的 持续 时 间 


$button.velocity 


(fadeIn.p, fadeIn.oFast); 


/* 设置 动画 使 用 较 慢 的 持续 时 间 */ 
$modal.velocity(fadeIn.p, fadeIn.oSlow); 




















男 一 种 做 法 是 将 fastfllslow 作 为 子 对 象 脱 套 在 一 个 单独 的 o 选 项 对 象 里 面 。 两 种 做 法 襄 欢 用 哪 
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一 种 取决 于 你 的 个 人 喜好 。 





var fadeIn = { 
pe 
opacity: 1， 
top: "50px" 
外 
o: { 
fast: { 
duration: 1000， 
easing: "linear" 
外 
slow: { 
duration: 3000， 
easing: "linear" 
} 
} 
}; 


// 设置 动画 使 用 较 快 的 持续 时 间 

$button.velocity(fadeIn.p, fadeIn.o.fast); 

/* 设置 动画 使 用 较 慢 的 持续 时 间 */ 

$modal.velocity(fadeIn.p, fadeIn.o.slow); 

如 果 感 觉 这 么 写 太 麻烦 , 而 且 你 的 动画 逻辑 本 来 就 没有 几 行 JavaScript 代 码 , 那么 直接 在 调用 
时 设置 属性 和 选项 也 没 问题 。 不 要 因为 把 这 个 步骤 完全 省 去 了 就 感觉 自己 是 个 差劲 的 开发 人 员 。 
你 永远 都 应 该 使 用 适合 自己 项 目的 方法 , 不 论 这 种 方法 多 么 适合 其 他 项 目 。 这 里 学 到 一 个 简单 的 
道理 : 如 果 发 现 自己 需要 动画 工作 流 的 最 佳 实践 ， 那 么 它 就 确实 存在 。 




















4.3 代码 技巧 : 组 织 排序 动画 


Velocity 有 一 个 名 为 UI pack 的 小 插件 。( 请 至 VelocityJS.org/#uiPack 获 取 。) 它 大 幅 优 化 了 UI 
动画 的 工作 流 ， 从 而 提升 了 Velocity 的 功能 。 本 章 中 的 许多 技巧 ， 包 括 下 面 将 要 讨论 的 ， 都 用 到 
了 这 个 插件 。 








要 安装 UI pack， 只 需要 在 Velocity 的 <script> 标 签 后 面 ， 页 面 上 body 结 尾 处 的 </body> 标 签 前 
面 为 它 加 上 <script> 标 签 。 


<script src="velocity.js"></script> 
<script src="velocity.ui.js"></script> 


4.3 ”代码 技巧 : 组织 排序 动画 二 45 


本 节 中 要 讨论 的 这 个 UI pack 功 能 叫 作 顺 序 运行 (sequence running ) 。 该 功能 将 会 从 此 改变 
你 的 动画 工作 流 。 它 是 治愈 胡乱 扔 套 的 动画 代码 的 灵 坟 妙药 。 





4.3.1 一 般 做 法 
如 果 不 使 用 UI pack， 要 连续 设置 不 同 元 素 的 动画 的 一 般 做 法 如 下 。 








// 设置 element1 的 动画 ， 紧 接着 设置 element2 的 动画 ， 紧 接着 设置 element3 的 动画 
$element1.velocity({ translateX: 100, opacity: 1 }, 1000, function() { 
$element2.velocity({ translateX: 200, opacity: 1 }, 1000, function() { 
$element3.velocity({ translateX: 300, opacity: 1 }, 1000); 
}); 
})); 


不 要 让 这 个 简单 的 例子 蒙蔽 你 的 双眼 : 在 真实 的 产品 代码 中 , 动画 序列 里 包含 比 上 面 例子 中 
多 得 多 的 属性 、 选 项 和 髋 套 关系 。 这 样 的 代码 最 常 出 现在 加 载 序 列 ( 当 某 个 页 面 或 某 个 子 部 分 首 
次 加 载 时 ) 中 ， 因 为 它 需 要 设置 多 个 元 素 到 位 的 动画 。 














注意 上 面 显示 的 代码 不 同 于 将 多 个 动画 链 到 同一 元 素 上 的 操作 , 后 者 毫 不 麻烦 而 且 也 不 需要 
衣 套 。 





// 将 多 个 动画 链 到 同一 元 素 上 
$element1 
.velocity({ translateX: 100 }) 
.velocity({ translateY: 100 }) 
.velocity({ translatez: 100 }); 





那么 第 一 段 代码 示例 ( 就 是 设置 不 同 元 素 的 动画 的 代码 示例 ) 究竟 哪里 出 了 问题 ?此 处 可 
以 列举 几 条 主要 问题 。 


口 因为 每 一 级 都 有 典 套 ， 因 此 代码 在 横向 上 会 迅速 变 长 ， 这 使 得 在 IDE 中 编辑 代码 越 来 越 














困难 。 
口 在 整个 序列 中 ， 都 无 法 轻易 重新 调整 调用 的 顺序 。( 如 果 要 调整 的 话 ， 需 要 非常 小 心地 复 
制 粘贴 。) 








口 无 法 轻易 指明 哪些 调用 应 该 是 并 行 运行 的 。 比 如 在 整个 序列 运行 到 一 半 的 时 候 ， 想 让 两 
幅 图 片 从 不 同 的 起 始点 滑 和 视图。 把 这 段 代码 写 进 去 以 后 ， 怎 么 样 髋 套 并 行 的 小 序列 之 
后 发 生 的 动画 ， 同 时 又 不 让 原本 已 经 难以 维护 的 代码 变 得 难 上 加 难 ， 就 不 是 那么 轻易 能 
办 得 到 了 。 
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4.3.2 ”优化 做 法 

在 学 习 解 决 这 个 丑陋 问题 的 优雅 方式 之 前 , 很 重要 的 一 件 事 是 理解 Velocity 的 两 个 简单 功能 。 
首先 ， 要 知道 Velocity 接受 多 参数 语法 : 最 常见 的 写法 就 是 在 jQuery 元 素 调用 Velocity 时 ， 人 参数 包 
括 一 个 属性 对 象 ， 后 面 跟 着 一 个 选项 对 象 (之 前 所 有 的 代码 示例 都 是 这 么 写 的 )。 





























// 迄今 为 止 使 用 的 参数 语法 
$element .velocity({ opacity: 1, top: "50px" }, { duration: 1000, easing: "linear" }); 





男 一 种 语法 则 要 与 Velocity 的 效用 函数 (utility function ) 配合 使 用 ， 该 效用 函数 可 以 使 用 基 
本 的 Velocity 对 象 设置 元 素 的 动画 , 而 不 是 断 开 与 一 个 jQuery 元 素 对 象 的 链接 。 以 下 就 是 设置 离开 
基本 Velocity 对 象 的 动画 的 代码 写法 。 



































// Velocity 将 自己 注册 到 jQuery 的 $ 对 象 上 ， 可 以 在 此 处 使 用 
$.Velocity({ e: $element, p: { opacity: 1, scale: 1 }, o0: { duration: 1000, easing: "linear"” } }); 























正如 上 述 代码 显示 的 ， 另 一 种 写法 就 是 将 一 个 单独 的 对 象 传 人 Velocity 函数 ， 该 单独 对 象 中 
的 成 员 对 象 一 一 映射 到 每 一 个 标准 Velocity 参数 上 ( 元素 elements、 属 性 properties 和 选项 options )。 
为 了 简便 起 见 ， 每 个 成 员 对 象 的 名 称 只 用 了 对 应 对 象 的 首 字 母 来 表示 ( e 代 表 elements 、p 代 表 
properties 、o 代 表 options )。 























另外 ,注意 此 处 是 将 目标 元 素 作 为 Velocity 的 一 个 参数 传 进去 的 ， 因 为 你 不 再 是 直接 在 一 个 
元 素 上 触发 Velocity。 最 终 效果 与 之 前 的 那 种 写法 是 一 模 一 样 的 。 








如 你 所 见 ， 新 写法 并 没有 让 代码 变 得 笨重 许多 ， 但 至 少 同样 利于 表意 。 知 道 了 这 种 新 写法 ， 
就 可 以 学 习 使 用 UI pack 的 顺序 运行 功能 了 : 只 需要 创建 一 个 由 Velocity 调用 构成 的 数组 ， 每 一 个 
调用 都 使 用 单个 对 象 的 写法 , 请 参考 下 面 的 代码 示例 。 然 后 , 将 整个 数组 传人 一 个 特殊 的 Velocity 
函数 中 ， 该 函数 可 以 连续 触发 调用 序列 。 当 一 个 Velocity 调用 完成 以 后 ， 下 一 个 就 会 执行 ， 即 使 
每 个 调用 针对 的 是 不 同 的 目标 元 素 也 是 如 此 。 

















// 创建 Velocity 调用 的 数组 
var loadingSequence = [ 
{ e: $element1, p: { translateX: 100, opacity: 1 }，o: { duration: 1000 } }, 
{ e: $element2, p: { translateX: 200, opacity: 1 }, 0o: { duration: 1000 } }, 
{ e: $element3, p: { translateX: 300, opacity: 1 }, 0o: { duration: 1000 } } 
J; 
// 将 数组 传 入 $.Velocity.RunSequence 函数 中 以 启动 序列 
$.Velocity.RunSequence(loadingSequence); 


4.4 代码 技巧 : 打包 你 的 效果 二 47 


这 么 做 的 好 处 很 明显 。 





口 可 以 很 容易 地 对 整个 序列 重新 排序 ， 不 需要 担心 破坏 了 座 套 结构 。 
口 可 以 迅速 看 出 各 个 调用 的 属性 和 选项 的 不 同 之 处 。 
你 的 代码 对 别人 来 说 也 非常 易 读 ， 其 意图 也 一 目 了 然 。 











如 果 将 这 一 技巧 与 前 面 讲 到 的 技巧 ( 把 CSS 类 写成 JavaScript 对 象 ) 结合 使 用 ,代码 看 上 去 就 
显得 格外 优雅 了 。 





$.Velocity.RunSequence( 
{ e: $element1, p: { translateX: 100, opacity: 1 }, o: slideIn.o }, 
{ e: $element2, p: { translateX: 200, opacity: 1 }, o: slideIn.o }, 
{ e: $element3, p: { translateX: 300, opacity: 1 }, o: slideIn.o } 


]); 





表意 性 和 易 维护 性 并 非 顺 序 运 行 仅 有 的 好 处 : 还 可 以 通过 使 用 特殊 的 sequenceQueue 选 0 
得 并 行 运行 各 个 调用 的 能 力 。 将 其 设置 为 false 时 ,单独 的 调用 与 它 之 前 的 调用 就 会 并 行 执行 。 这 
可 以 让 多 个 元 素 同时 以 动画 方式 进入 视图 ， 并 且 只 用 一 个 Velocity 序 列 就 能 够 对 时 间 安 排 进 行 错 
综 复杂 的 控制 。 如 果 没 有 这 种 方法 , 通常 情况 下 要 实现 这 种 效果 需要 通过 乱糟糟 的 回调 伦 套 来 进 
行 精心 安排 才 行 。 请 参考 示例 中 的 行内 注释 了 解 详情 。 















































$.Velocity.RunSequence([ 
{ elements: $element1, properties: { translateX: 100 }, options: { duration: 1000 } }, 
// 下 面 一 个 调用 会 与 第 一 个 调用 同时 开始 ， 因 为 它 使 用 了 sequenceQueue: false 选 项 
{ elements: $element2, properties: { translateX: 200 }, options: { duration: 1000, sequenceQueue: 
false }, 
// 按照 正常 情况 ,下面 的 调用 将 在 第 二 条 调用 完成 之 后 执行 
{ elements: $element3, properties: { translateX: 300 }, options: { duration: 1000 } 


J; 





4.4 代码 技巧 : 打包 你 的 效果 


动 效 设计 中 最 常用 的 效果 之 一 就 是 淡 入 淡出 内 容 。 这 种 动画 类 型 经 常 是 一 系列 单独 的 动画 调 
用 链 在 一 起 ， 呈 现 出 细腻 、 多 层次 的 效果 。 











4.4.1 一 般 做 法 
除了 简单 地 设置 一 个 元 素 的 opacity 值 变动 至 1 的 动画 以 外 ， 你 可 能 想 要 同时 设置 元 素 的 
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scale 属 性 的 动画 ， 让 这 个 元 素 看 上 去 不 仅 在 淡 入 ， 而 且 在 不 断 长 大 直至 最 终 大 小 。 一 旦 元 素 完 
全 显示 出 来 ， 作 为 收尾 润色 ， 你 还 可 能 想 要 设置 元 素 边框 ( border ) 的 宽度 变动 至 lrem 的 动画 。 
如 果 这 个 动画 在 一 个 页 面 上 要 发 生 多 次 ， 而 且 是 在 不 同 元 素 上 发 生 的 ， 那么 为 了 避免 代码 重复 ， 
把 它 写成 一 个 独立 的 函数 就 很 有 必要 了 。 否则 的 话 , 就 必须 在 scriptjs 文 件 中 反复 重复 下 面 这 段 不 
能 表意 的 代码 。 























$element 
.velocity({ opacity: 1, scale: 1 }, { duration: 500, easing: "ease-in-out" }) 
.velocity({ borderWidth: "irem" }, { delay: 200, easing: "spring", duration: 400 }); 


不 同 于 前 一 节 中 讨论 的 顺序 运行 技巧 ， 上 面 这 段 代码 包含 了 发 生 在 同一 元 素 上 的 多 个 动画 。 
在 同一 个 元 素 上 链 在 一 起 的 多 个 动画 构成 一 个 效果 。 如 果 想 要 通过 本 章 所 讲 的 第 一 个 技巧 (把 
CSS 类 写成 JavaScript 对 象 ) 来 优化 这 个 效果 的 话 ， 就 必须 费劲 地 把 整个 动画 每 一 阶段 的 每 个 参数 
对 象 命名 。 但 是 ,一 方面 由 于 这 一 特定 序列 的 独特 性 ,这些 对 象 可 能 不 会 在 动画 代码 的 其 他 地 方 
用 到 ; 另 一 方面 ， 还 必须 得 为 每 个 动画 调用 对 应 的 对 象 妃 加 整数 , 好 让 它们 彼此 区 分 开 来 。 这 样 
就 会 造成 混乱 ， 也 会 抵消 将 CSS 类 写成 JavaScript 对 象 这 一 技巧 所 带 来 的 代码 组 织 和 简洁 方面 的 
好 处 。 






































图 不 是 一 腿 就 能 看 得 出 
性 和 选项 ? 这 些 问题 的 








0 油 


像 这 种 效果 的 另 一 个 问题 在 于 代码 不 能 很 好 地 表意 , 也 就 是 说 , 其; 
来 ,为 什么 要 用 两 个 动画 调用 而 不 是 一 个 ?为 什么 为 每 个 调用 选择 这 些 
答案 与 触发 动画 的 代码 无 关 ， 因 此 应 当 被 隐藏 起 来 。 








本 


4.4.2 优化 做 法 


Velocity 的 UI pack 能 让 你 注册 效果 ， 然 后 就 可 以 在 整 站 中 重复 使 用 了 。 一 旦 注册 效果 之 后 ， 
就 可 以 通过 将 注册 名 称 作为 第 一 个 参数 传人 Velocity 进行 调用 。 











// 假设 我 们 将 效果 注册 在 "growIn" 名 下 
$element .velocity("growIn"); 





这 样 一 来 ,表达 的 意图 就 更 明显 了 , 不 是 吗 ? 你 马上 就 能 了 解 代码 的 目的 : 一 个 元 素 会 逐渐 
变 大 显示 出 来 。 同 时 ， 代 码 仍 保持 简洁 、 易 于 维护 。 








另外 ,已 注册 的 效果 与 标准 Velocity 调用 的 行为 完全 一 致 ， 可 以 像 往常 一 样 传人 一 个 选项 对 
象 ， 而 且 也 可 以 把 其 他 Velocity 调用 链 在 上 面 。 
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$element 
// 将 元 素 滚动 到 视图 中 
.velocity("scroll1") 
// 然后 用 以 下 设置 在 元 素 上 触发 "growIn" 效 果 
.velocity("growIn", { duration: 1000, delay: 200 }) 








如 果 UI pack 已 经 加 载 到 你 的 页 面 上 ， 像 这 样 的 效果 可 以 用 以 下 写法 进行 注册 。 


$.Velocity.RegisterEffect(name, { 
// 未 将 duration 值 传 入 到 调用 中 时 ， 将 使 用 的 默认 duration 值 
defaultDuration: duration, 
// 以 下 Velocity 调用 一 个 接 一 个 发 生 ， 每 个 所 用 的 时 间 等 于 效果 的 总 时 间 乘 以 预定 的 比例 
calls: [ 
[ propertiesObject, durationpercentage, optionsObject ] ， 





[ propertiesObject, durationpercentage, optionsObject ] 


]， 


reset: resetPpropertiesObject 


}); 





让 我 们 一 步 步 解读 这 一 模板 。 











(1) 第 一 个 元 素 是 效果 的 名 称 。 如 果 这 个 效果 负责 的 是 将 元 素 在 视图 中 显示 出 来 ( 比如 在 淡 
入 效果 中 ， 将 元 素 的 opacity 值 从 0 变动 至 1 )， 那么 重要 的 一 点 就 是 在 名 称 后 面 添 加 后 级 In。 





(2) 第 二 个 参数 是 一 个 对 象 ， 它 定义 了 效果 的 行为 。 该 对 象 中 的 第 一 个 属性 是 default Duration。 
在 触发 效果 的 Velocity 调用 没有 传人 duration 时 ， 该 属性 指定 的 就 是 整个 效果 所 需 的 持续 时 间 。 




















(3) 对 象 中 的 第 二 个 属性 是 calls 数 组 , 它 包含 构成 这 个 效果 的 Velocity 调用 (按照 发 生 的 先后 
顺序 排列 )。 这 个 数组 中 的 每 一 项 又 是 一 个 数组 ， 其 中 包含 调用 的 属性 对 象 ; 然后 是 该 调用 占用 
效果 总 时 长 的 比例 (一 个 十 进 制 值 ， 默 认为 1.00 )， 这 一 项 为 可 选项 ; 最 后 是 该 调用 的 选项 对 象 ， 
该 项 也 是 可 选项 。 注 意 ， 在 cal1s 数 组 中 指定 的 Velocity 调用 仅 接 受 easing 和 delay 两 个 选项 。 


















































(4) 最 后 ， 可 以 选择 传人 一 个 reset 对 象 。 该 reset 对 象 的 写法 与 标准 的 Velocity 属 性 映射 对 象 
的 写法 一 样 , 但 它 是 用 来 在 效果 全 部 完成 之 后 立即 更 改 属性 值 的 。 当 你 设置 了 一 个 元 素 的 opacity 
和 scale 属 性 值 变 动 至 0 的 动画 ( 离开 视图 )， 在 元 素 隐藏 后 又 想 将 元 素 的 scale 属 性 重新 设 为 1 时 ， 
重 置 对 象 就 很 有 用 了 。 这 么 做 可 以 让 后 续 效 果 不 需要 担心 多 余 的 事情 ， 即 除了 opacity 以 外 还 要 
把 其 他 属性 重 置 才能 让 效果 正确 生效 。 换 言 之 ， 可 以 利用 reset 属 性 映射 让 这 个 效果 自 成 一 体 ， 
不 在 目标 元 素 上 留 下 扫尾 工作 。 
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除了 reset 对 象 以 外 ，UI pack 的 效果 注册 还 为 工作 流 带 来 了 另 一 强大 功能 ， 那 就 是 自动 的 
display 属 性 切换 。 当 一 个 元 素 开始 以 动画 方式 进入 视图 时 ， 你 想 要 确保 display 的 值 设 为 none 以 
外 的 其 他 值 ， 这 样 元 素 在 整个 动画 过 程 中 都 是 可 见 的 。( 请 记 住 ，display: none 将 会 把 元 素 从 文 
档 流 中 移 除 。) 反 过 来 ， 当 一 个 元 素 淡出 时 ， 你 通常 想 要 确保 opacity 值 达到 0 时 ， 将 display 的 值 
改 为 "none"。 这 么 做 ， 就 可 以 在 用 完 这 个 元 素 之 后 移 除 它 所 有 存在 的 痕迹 。 




































































使 用 jQuery 时 ，display 切 换 是 通过 将 show() 和 hide() 辅 助 函 数 链 到 动画 上 来 完成 的 (经 常会 
被 乱糟糟 地 埋 在 垦 套 回调 中 )。 然 而 使 用 Velocity 的 UIpack， 会 自动 实现 这 一 逻辑 ， 只 要 你 在 给 效 
果 命 名 时 恰当 地 添加 了 In 或 Out 作为 后 绥 。 



























































让 我 们 注册 两 个 UI pack 效 果 : 一 个 方向 是 m， 另 一 个 方向 是 Out。 之 所 以 称 效果 为 shadowIn 
是 因为 它 可 以 让 元 素 淡出 、 变 大 显示 ， 然 后 将 其 poxShadow 属 性 向 外 扩大 。 





























$.Velocity 
.RegisterEffect("shadowIn", { 
defaultDuration: 1000， 
calls: [ 
[ { opacity: 1, scale: 1 }, 0.4 ] ， 
[ { boxShadowBlur: 50 }, 0.6 ] 
] 
)) 
.RegisterEffect("shadowOut", { 
defaultDuration: 800, 
calls: [ 
// 我 们 反 转 顺序 ， 以 镜像 "IN" 方 向 
[ { boxShadowBlur: 50 }, 0.2 ]， 
[ { opacity: 0, scale: 0 }, 0.8 | 
] 
})); 








如 果 将 效果 名 称 以 Out 结 尾 ，Velocity 会 自动 在 动画 结束 后 ， 将 元 素 的 display 属 性 设 为 none。 
反之 ， 如 果 效 果 名 称 以 In 结 尾 ，Velocity 会 自动 将 display 属 性 设置 为 与 元 素 标签 类 型 匹配 的 默认 
值 。( 例如 ,为 链接 设置 的 值 为 "inline"; 为 div 和 p 设 置 的 值 为 "block"。) 如 果 效 果 名 称 中 不 包含 
这 两 个 特殊 后 级 中 的 任意 一 个 ， 那 么 UI pack 将 不 会 执行 自动 display 设 置 。 




















注册 效果 不 仅 优化 了 代码 ， 而 且 使 其 变 得 非常 易于 用 于 其 他 项 目 中 或 供 其 他 开发 人 员 使 用 。 
当 你 设计 了 一 个 很 喜欢 的 效果 , 现在 就 可 以 轻松 地 将 效果 的 注册 代码 分 享 给 他 人 使 用 。 真 是 非常 
地 便捷 ! 
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4.5 设计 技巧 




















本 章 迄 今 为 止 所 讨论 的 技巧 都 是 在 动 效 设计 的 编程 阶段 提升 工作 流 。 本 节 中 讲述 的 这 些 技巧 
则 注重 设计 环节 , 也 就 是 仍 在 试验 以 求 找到 适合 UI 的 完美 动画 的 阶段 。 这 一 阶段 需要 很 多 创造 力 
和 重复 劳动 ， 因 此 相应 地 也 需要 工作 流 的 提升 。 

















4.5.1 定时 乘 数 


A 


第 一 个 设计 技巧 是 使 用 全 局 定时 乘 数 ， 即 在 动画 中 所 有 的 delay 和 duration 值 处 都 添加 一 个 
恒定 的 乘 数 。 








首先 定义 你 的 全 局 定时 乘 数 〈 强制 指定 M 作 为 乘 数 )。 


var M = 1; 








然后 ， 在 每 一 个 动画 调用 中 ， 将 这 个 乘 数 与 duration 和 delay 选 项 值 相 乘 。 


$element1.animate({ opacity: 1 }, { duration: 1000 * M }); 
$element2.velocity({ opacity: 1 }, { delay: 250 * M }); 


aa 注意 如 果 你 使 用 SASS 或 LESS, 由 于 这 两 者 都 支持 在 样式 表 中 使 用 变量 ,因此 这 一 技巧 也 
A 同样 适用 于 CSS 动 画 ! 


藤 入 乘 数 常量 可 以 帮助 你 在 一 个 地 方 〈 可 能 在 stylejs 文 件 的 顶部 ) 迅速 修改 M 常 量 的 值 ， 从 
而 能 马上 加 快 或 减 慢 整 个 页 面 上 的 所 有 动画 。 这 种 时 间 控 制 的 好 处 包括 下 面 两 个 。 











口 将 动画 的 速度 减 慢 ， 有 助 于 在 复杂 动画 序列 中 完善 单个 动画 的 调用 时 间 。 当 你 为 了 优化 
包含 多 个 元 素 的 动画 序列 而 要 反复 刷新 页 面 时 ， 让 这 个 序列 慢 速 播放 可 以 更 容易 地 分 析 
单个 元 素 如 何 与 其 他 元 素 互动 。 

口 执行 重复 性 UT 测试 时 ， 请 加 快 动画 播放 速度 。 要 测试 网 站 的 其 他 方面 而 不 是 动画 时 ， 评 
价 UI 动 画 的 最 终 状态 〈 元素 最 终 是 什么 样 ) 比 测试 动画 的 过 程 更 加 重要 。 在 这 种 情况 下 ， 
这 么 做 可 以 节省 时 间 ， 不 需要 头疼 如 何 去 加 速 动画 ， 从 而 减少 每 次 页 面 刷新 后 等 待 动画 
播放 完成 的 时 间 。 



























































该 功能 可 以 很 方便 地 通过 Velocity 中 一 个 名 为 mock 的 东西 实现 。mock 作 为 幕后 的 全 局 乘 数 发 
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挥 着 作用 , 不 再 需要 手动 在 各 处 添加 M 常 量 了 。 就 像 下 面 示例 中 显示 的 , mock 会 同时 乘 以 duration 
和 delay 值 。 要 想 启 用 mock， 可 以 临时 将 $.Velocity.mock 设 为 你 想 要 的 乘 数值 。 








// 所 有 动画 的 时 间 都 乘 以 5 

$.Velocity.mock = 5; 

// 现在 所 有 动画 的 时 间 都 是 经 过 调整 的 

// 下 面 的 dufation 实 际 上 是 5000 毫 秒 

$element .velocity({ opacity: 1 }, { duration: 1000 }); 


Velocity 的 mock 功 能 同样 接受 布尔 值 : 将 mock 设 为 true 就 会 将 所 有 的 持续 时 间 和 延迟 时 间 
设 为 0 毫秒 ， 这 会 强制 所 有 动画 在 浏览 器 计时 中 断 一 次 的 时 间 内 完成 ， 这 样 的 中 断 每 几 毫 秒 就 
会 发 生 一 次 。 这 是 一 种 强大 的 简便 方法 ， 能 让 你 在 动画 妨碍 到 UI 的 开发 和 测试 时 ， 迅 速 关 闭 所 
有 动画 。 























4.5.2 ”使 用 Velocity 动 效 设计 器 


制作 Velocity 动 效 设计 器 (VMD ) 的 唯一 目的 就 是 帮助 开发 人 员 流 畅 地 进行 动 效 设计 创作 。 
VMD 是 一 个 书签 工具 ， 你 可 以 把 它 加 载 到 页 面 上 从 而 实时 地 进行 动画 设计 。 它 还 允许 你 通过 双 
击 元 素 打 开 一 个 模 态 窗口 ， 在 该 窗口 内 可 以 为 该 元 素 设置 动画 的 属性 和 选项 。 然后, 在 键盘 上 点 
击 回 车 就 可 以 马上 查看 动画 效果 ， 而 无 需 刷新 页 面 。 















































CC 注意 ”可 前 往 http://velocityjs.org/#vmd 获 取 Velocity 动 效 设 计 器 。 
I 





一 旦 所 有 元 素 的 动画 都 已 经 设计 为 想 要 的 样子 , 就 可 以 把 成 果 导 出 成 一 对 一 的 Velocity 代 码 ， 
然后 可 以 马上 把 这 段 代 码 放 到 IDE 中 用 于 制作 。( 生成 的 代码 与 jQuery 也 是 完全 兼容 的 。) 

















最 后 , VMD 避 人 免 了 持续 不 断 的 IDE 和 浏览 絮 标 签 页 之 间 的 切换 以 及 重复 触发 UI 状态 , 因此 节 
省 了 不 计 其 数 的 开发 时 间 。 另 外 , 它 使 设计 师 至 开发 人 员 的 工作 流 更 为 流畅 ， 因 为 它 允 许 两 个 团 
队 实 时 并 肩 工作 : 通过 使 用 VMD， 设 计 师 可 以 在 不 熟悉 网 站 的 JavaScript 和 CSS 的 情况 下 也 能 进 
行动 效 设 计 。 他 们 只 需要 把 导出 的 Velocity 代码 传 给 开发 人 员 ， 然 后 让 开发 人 员 酌 情 整合 到 代码 
库 里 面 即 可 。 
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让 动 效 设 计 


"A=| 
变 得 


趣味 横生 。 





VMD 是 一 个 高 度 视觉 化 的 工具 ， 请 访问 VelocityJS.org/#vmd 观 看 介绍 视频 。 


4.6 ”小 结 


当 使 用 动画 工作 流 技巧 时 ， 你 会 注意 到 动 效 设计 那 邻 人 生 旦 的 黑匣子 已 经 开始 慢 慢 打开 了 。 
像 Stripe.com 和 Webflow.com 这 样 的 前 沿 网 站 上 看 到 的 精巧 漂亮 的 加 载 动画 ， 你 已 经 开始 能 看 懂 
了 。 你 能 够 编写 动画 序列 的 代码 ， 这 将 给 你 信心 。 同 时 ， 这 些 新 学 到 的 技能 将 会 减少 你 在 开发 中 
的 繁琐 工作 ， 使 实现 动 效 设计 目标 变 得 不 仅 更 简单 ， 而 且 也 有 趣 得 多 。 








邮 





鉴于 网 页 上 很 少 使 用 文本 动画 ， 因 此 它 成 为 了 一 种 打动 用 户 
的 简单 方式 。 恰 恰 由 于 这 个 原因 使 这 个 主题 学 起 来 趣味 横生 : 基 
本 的 技术 很 容易 掌握 ， 但 效果 在 用 户 看 来 却 异 常 丰富 、 复 杂 。 

本 章 介绍 了 几 种 工具 ， 可 以 帮 你 免 于 文本 动画 枯燥 乏味 的 一 
面 ， 并 且 为 你 提供 了 高 效 的 工作 流 。 继 续 往 下 读 ， 学 习 这 个 黑 魔 
法 的 玄妙 之 处 。 


56 区 第 5 章 文本 动画 


5.1 文本 动画 的 一 般 做 法 


我 们 通常 编写 网 站 使 用 的 HTML 元 素 (例如 div、table 、anchor 标 签 和 其 他 类 似 元 素 ) 都 是 
网 页 上 能 够 添加 样式 的 最 低 一 级 的 组 成 部 分 。 因 此, 我 们 自然 而 然 认 为 这 些 也 是 能 够 添加 动画 的 
最 低 一 级 组 成 部 分 。 


























文本 本 身 并 不 构成 一 个 元 素 ; 浏览 器 会 指定 一 块 文本 作为 一 个 文本 节点 〈textnode ) ， 而 文 
本 节点 是 没 法 添加 样式 的 ， 它 是 更 低 一 级 的 网 页 组 成 ,必须 被 包含 在 一 个 元 素 里 才 行 。 另 外 , 浏 
览 器 不 会 将 文本 节点 再 细 分 为 语法 成 分 ; 你 没有 办 法 操作 单个 字母 、 单 词 或 句子 , 这 使 得 问题 更 
为 环 手 。 

















因此 ， 要 想 以 字母 、 单 词 或 句子 为 单位 设置 文本 的 动画 ， 必 须要 把 每 个 文本 节点 以 此 为 单 
位 拆 分 成 单独 的 文本 节点 ， 然 后 把 它们 每 一 个 再 用 一 个 新 元 素 包 起 来 。 这 样 就 可 以 设置 其 动画 
了 。 但 是 ， 手 动 将 文本 包 囊 在 例如 span 元 素 内 ， 这 一 工作 不 仅 枯燥 乏味 ， 而 且 还 会 让 HTML 腑 肿 
不 堪 。 





























这 人 么 说 来 ， 网络 上 鲜 见 文本 动画 就 不 足 为 奇 了 ， 因 为 总 是 会 面临 很 多 麻烦 。 如 此 一 来 ， 网络 
相对 于 Adobe After Effects 这 样 的 专业 动 效 设计 软件 就 处 于 审美 方面 的 劣势 , 后 者 可 以 设计 出 精细 
的 文本 动画 ,这样 的 动画 在 电视 广告 或 电影 片头 经 常会 看 到 。 这 些 效 果 看 上 去 真是 无 比 精美 。 但 
可 惜 的 是 ， 它 们 不 仅 很 难 被 整合 到 网 络 上 ， 而 且 即 使 整合 了 也 会 被 广泛 认为 是 糟糕 的 实践 方式 。 
毕 竞 ， 网 络 是 注重 功能 大 于 形式 的 媒介 ， 而 文本 动画 主要 还 是 一 种 形式 。 















































但 是 ， 有 一 种 文本 动画 使 用 案例 ， 如 果 讶 慎 使 用 的 话 ， 是 可 以 很 好 地 移植 到 网 络 上 的 : 如 果 
仔细 注意 过 电影 中 对 未 来 硬件 界面 的 描绘 , 就 会 注意 到 常见 的 文本 主线 是 根据 语法 规则 以 动画 方 
式 进入 或 离开 视图 的 。 根 据 流行 文化 所 展示 的 ， 未 来 的 电脑 科技 中 包含 单词 和 句子 的 动画 , 例如 
闪烁 、 毛 刺 ( glitch )、 弹 出 和 模糊 效果 。 这 些 效果 很 酷 ， 而 且 把 它们 用 于 动态 显示 隐藏 文本 也 没 
多 大 坏处 , 因为 文本 总 归 要 用 到 这 样 或 那样 的 调整 可 见 性 的 动画 的 。 这 种 动态 改变 文本 可 见 性 的 
思想 正 是 你 在 本 童 将 要 学 到 的 。 
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文本 动画 


看 起 来 


融 是 酷 。 





5.2 ”为 使 用 Blast.js 实现 动画 准备 文本 元 素 


此 处 选择 的 实现 文本 动画 的 工具 是 Blast.js, 它 可 以 很 方便 地 将 文本 块 拆 成 字符 .单词 和 句子 。 
然后 你 就 可 以 用 Velocity 和 UIpack 插 件 来 给 这 些 拆 开 的 部 分 加 动画 了 。 









:十 二 


注意 ”前往 Julian.com/research/blast 获 取 Blast.js。 


Blastjs 有 三 种 分 隔 符 ( delimiter ) 类 型 ， 分 别 定义 了 三 种 单独 提取 的 语法 成 分 : 字符 、 单 词 
和 句子 。 假 设 你 有 一 个 下 面 这 样 的 div。 
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<div> 
Hello World 
</div> 





如 果 你 通过 下 面 的 语法 调用 Blast 函 数 
$("div").blast({ delimiter: "word" }); 
这 个 div 就 会 变 成 下 面 这 个 样子 。 


<div class="blast-root"> 
<span class="blast">Hello</span> 
<span class="blast">World</span> 
</div> 











正如 你 所 见 ，Blast 将 目标 div 的 文本 分 割 成 一 个 个 由 span 元 泰 包 庄 起 来 的 文本 部 分 。 如 果 改 
而 使 用 character 分 隔 符 ， 那 么 结果 就 会 是 下 面 这 个 样子 。 


























<div class="blast-root"> 
<Span class="blast">H</span> 
<Span class="blast">e</span> 
<Span class="blast">l</span> 
<Span class="blast">l</span> 
<Span class="blast">o</span> 
<Span class="blast"> </span> 
<span class="blast">W</span> 
<Span class="blast">o</span> 
<Span class="blast">r</span> 
<Span class="blast">l</span> 
<Span class="blast">d</span> 

</div> 


现在 你 就 可 以 单独 设置 这 些 span 元 素 的 动画 了 。 但 是 , 在 深入 了 解 文本 动画 之 前 ,应当 多 学 
习 一 下 Blast 的 工作 原理 ， 这 样 才 能 够 充分 利用 它 的 强大 功能 。 





5.2.1 ”Blast.js 的 工作 原理 
本 节 的 目的 就 是 让 你 放心 地 使 用 Blast 将 心爱 的 页 面 上 的 文本 进行 拆 分 。 让 我 们 继续 ! 

















你 所 熟悉 的 div、table 和 其 他 HTML 元 素 都 被 称 为 元 素 节 点 (elementnode ) 。 一 个 元 素 节 点 
通常 包含 两 种 类 型 的 子 节点 : 其 他 元 素 节 点 和 文本 节点 ( 原始 文本 )。 
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以 下 面 这 个 元 素 为 例 。 


<div> 
Hello <span>World</span> 
</div> 


这 个 div 元 素 包含 两 个 子 节点 : 一 个 文本 节点 ( Hello ) 和 一 个 span 元 素 节 点 。span 元 素 节 点 又 
有 一 个 自己 的 子 节点 : 男 一 个 文本 节点 ( World )。 


调用 Blast 时 ，Blast 会 遍历 目标 元 素 的 整个 后 代 元 素 链 ， 以 找 出 文本 节点 。 对 于 每 一 个 文本 
节点 ，Blast 依 据 指定 的 分 隔 符 ( character 、word 或 sentence ) 执行 正则 搜索 ,将 这 个 文本 节点 
拆 分 为 新 的 元 素 ， 每 个 元 素 中 有 它 自 己 的 那 部 分 文本 节点 内 容 。 由 于 Blast 实 际 上 不 拆 分 元 素 节 
点 ， 而 只 拆 分 文本 节点 ， 因 此 ， 可 以 安全 地 将 其 用 于 整个 页 面 ， 不 需要 担心 会 破坏 原本 元 素 的 
事件 句柄 (event handler ) 或 发 生 其 他 不 可 预测 的 行为 。 将 Blast 用 于 经 常 夹杂 着 HTML 代码 的 
用 户 生 成 的 内 容 时 ， 这 种 通用 性 就 至 关 重 要 了 。( 例如 ， 你 想 要 把 发 布 在 网 站 评论 区 的 一 条 信 
息 按 单词 拆 分 ， 以 便 可 以 强调 重点 段落 。 这 时 使 用 Blast 来 拆 分 就 很 安全 ， 你 不 需要 担心 破坏 用 
户 的 租 入 式 链接 。) 






































除了 抗 扰 性 以 外 ，Blast 还 提供 了 高 水 平 的 准确 性 。 它 不 是 傻 傻 地 在 空格 处 拆 单词 , 或 在 句号 
处 拆 句子 。 它 利用 的 是 拉丁 字母 语言 的 UTF-8 字 符 集 ， 也 就 是 说 可 以 把 它 用 在 法 语 、 德 语 、 西 班 
牙 语 、 英 语 、 意 大 利 语 和 葡萄 牙 语 的 内 容 上 ， 得 出 的 结果 依然 正确 。 
































假设 你 在 下 面 的 段落 上 使 用 了 Blast 的 sentence 分 隔 符 。( 下 面 所 使 用 的 粗 体 和 个 扰 代 表 Blast 
检测 出 来 的 连续 匹配 文本 。) Blast 正 确 地 识别 出 了 段落 中 的 六 个 句子 。 


Wil the sentence delimiter recognize this full sentence containing Spanish punctuation? /7es/ 
« Mais, oui ! » “Nested “quotes” don’t break the sentence delimiter! ” Further, periods inside words 
(e.g. Blast.js), in formal titles (e.g. Mrs. Bluth, Dr. Fiinke), and in “e.g.” and “i.e.” do not falsely match 


as sentence-final punctuation.Darn. That’s pretty impressive. 


请 注意 标点 符号 跟 在 了 正确 的 句子 后 面 ， 不 规则 的 句点 也 没有 错误 地 把 整 句 拆散 。 




















了 解 了 Blast 的 这 些 基 本 功能 后 ， 是 时 候 看 看 Blast 的 使 用 方法 了 。 


5.2.2 安装 
Blast 在 页 面 上 的 安装 方式 就 像 其 他 任何 JavaScript 插 件 一 样 : 将 合适 的 script 链 接 嵌 人 到 页 面 
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</body> 标 签 之 前 。 


<html> 
<head>My Page</head> 
<body> 
My content. 
<script src="jquery.js"></script> 
«<script src="velocity.js"></script> 
«<script src="blast.js"></script> 
</body> 
</html> 


BE 注意 Blast 需 要 使 用 jQuery (也 可 用 Zepto 替 换 jQuery )， 因 此 必须 将 它 添加 在 jQuery 的 标签 
一 之 下 。 不 论 Blast 是 在 Velocity 之 前 还 是 之 后 加 载 ， 都 没有 关系 。 














一 旦 Blast 加 载 之 后 ， 就 可 以 通过 在 jQuery 元 素 对 象 上 调用 .blast() 来 使 用 它 了 。Blast 只 接受 
一 个 选项 对 象 作为 其 唯一 参数 。 














$element.blast({ option1: value1, option2: value2 }); 


下 面 让 我 们 逐一 看 一 下 可 用 的 选项 。 


5.2.3 选项 : delimiter (分 隔 符 ) 

















Blast 最 重要 的 选项 就 是 delimiter, 它 接受 "character" (字符 )、"word" (单词 ) 或 "sentencey" 
(句子 )。 要 使 用 "sentence" 分 隔 符 对 $element 中 的 文本 进行 拆 分 ， 你 的 代码 会 是 下 面 这 个 样子 。 


$element.blast({ delimiter: "sentence" }); 





请 注意 ，Blast 把 生成 的 文本 包装 器 元 素 返 回 到 jQuery 选择 器 链 上 ， 于 是 你 就 可 以 像 下 面 这 样 
来 操作 了 。 


$element.blast({ delimiter: "sentence" }) 
.Css("opacity", 0.5); 


这 里 的 .css() 调 用 是 针对 单独 的 文本 元 素 ， 而 不 是 它们 的 父 级 元 素 ， 即 调用 Blast 的 $element 
元 素 。 
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5.2.4 选项 : customClass 〈 自 定义 类 ) 


为 了 操作 更 为 简便 ，Blast 提 供 了 两 个 选项 : customClass 和 generateValueClass。customClass 
的 行为 应 该 与 你 料想 的 一 模 一 样 : 将 一 个 自 定义 类 ( 作为 字符 串 ) 指派 给 文本 节点 包装 器 元 素 。 


假设 你 有 下 面 这 样 一 个 div 并 调用 了 Blast。 


<div> 
Hi Mom 
</div> 
$("div").blast({ delimiter: "word" , customClass: "myClass" }); 








这 个 div 就 会 变 成 下 面 这 个 样子 ( 注意 Blast 会 自动 给 每 个 文本 部 分 默认 添加 "blast" 类 )。 


<div> 
<span class="blast myClass">Hi</span> 


<span class="blast myClass">Mom</span> 
</div> 





提供 自 定义 类 的 价值 在 于 区 分 不 同 Blast 调 用 所 产生 的 元 素 。 例如 , 你 在 页 面 的 两 个 位 置 上 使 
用 了 Blast: 一 个 在 页 眉 ， 一 个 在 页 脚 ， 那 么 为 这 两 处 调用 指定 不 同 的 类 也 许 会 帮助 后 续 的 
JavaScript 代 码 和 CSS 样 式 在 文本 元 素 上 恰当 地 发 挥 作用 。 














5.2.5 选项 : generateValueClass (生成 值 类 ) 


generateValueClass 接 受 一 个 布尔 值 (true 或 false )， 用 来 表示 是 否 要 添加 一 个 特有 的 类 
(以 .blast-[delimiter]-[textValue] 的 格式 ) 到 生成 的 文本 元 素 上 。 


ai 注意 ”此 选项 仅 适 用 于 character 和 word 分 隔 符 。 


I 














[delimiter] 占 位 符 代表 的 是 调用 中 使 用 的 分 隔 符 类 型 ，[textValue] 占 位 符 代表 的 是 单独 元 
素 中 包含 的 文本 。 请 看 下 面 的 例子 。 





<div> 
Hi Mom 
</div> 
$("div").blast({ delimiter: "word" , generateValueClass: true }); 
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这 个 元 素 会 变 成 下 面 这 个 样子 。 


<div class="blast-root"> 
<span class="blast blast-word-Hi">Hi</span> 
<span class="blast blast-word-Mom">Mom</span> 
</div> 








当 Blast 调 用 时 delimiter 为 letter ， 那 么 该 元 素 则 会 变 成 下 面 这 个 样子 。 


<div class="blast-root"> 
<span class="blast blast-letter-H">H</span> 
<Span class="blast blast-letter-i">i</span> 
. and so on... 
</div> 





当 你 需要 根据 文本 内 容 针 对 匹配 的 文本 元 素 进行 CSS 或 JavaScript 操 作 时 ，generateValue- 
Class 这 个 选项 就 很 有 用 处 了 。 例 如 ， 如 果 将 这 个 功能 用 在 了 一 段 图 书 摘录 上 ， 就 可 以 通过 给 类 
为 .blast.word-and 的 元 素 设置 黄色 背景 ， 创 建 单词 and 的 所 有 实例 的 视觉 效果 。 














// 使 用 jQuery 实现 
$(".blast-word-and").css("background", "yellow"); 
// 使 用 纯 JavaScript 实 现 
document.querySelectorAll(“.blast-word-and”).forEach(function(item) { item.style.background = 
"yellow"; }); 
// 使 用 CSS 实 现 
.blast-word-and { 
background: yellow; 
} 























多 亏 这 个 功能 , 你 可 以 轻松 地 通过 CSS 或 JavaScript 匹 配 目标 文本 , 而 无 需 特意 使 用 乱糟糟 的 
自 定义 代码 来 检查 每 个 元 素 里 面 的 文本 内 容 。 





5.2.6 选项: tag (标签 ) 





此 选项 用 于 指定 包装 文本 部 分 的 元 素 的 类 型 。 默认 值 为 span, 但 你 也 可 以 传人 任何 其 他 元 素 
类 型 (例如 : a、div、p )。 请 看 下 面 的 例子 : 





<div> 
Hi Mom 
</div> 
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// 将 "div" 元 素 用 作 和 包装 器 标签 
$("div").blast({ delimiter: "word" , tag: "div" }); 








该 元 素 最 终 会 变 成 下 面 这 样 : 


«<div class="blast-root"> 
<div class="blast">Hi</div> 
<div class="blast">Mom</div> 
</div> 





这 一 功能 的 实用 之 处 在 于 它 可 以 确保 生成 的 文本 元 素 与 周围 html 的 结构 相仿 。 也 许 附 近 的 兄 
弟 元 素 都 是 div， 在 这 种 情况 下 上 面 例子 中 的 应 用 可 能 就 比较 适合 。 





























另外 ， 你 还 可 能 想 要 利用 不 同 标签 类 型 的 特殊 属性 。 例 如 ，strong 标 签 会 自动 让 文本 变 成 粗 
体 ， 而 div 标 签 会 强制 每 个 匹配 文本 都 从 新 一 行 开始 ， 因 为 div 的 默认 display 属 性 值 为 "block"。 














5.2.7 命令 : reverse ( 反 转 ) 


我 们 可 以 在 一 个 元 素 上 反 向 执行 Blast, 方法 是 将 false 作 为 唯一 参数 传 到 Blash 调 用 中 。 因此 ， 
如 果 你 已 经 拆 分 的 元 素 像 下 面 这 样 : 




















<div class="blast-root"> 
<div class="blast">Hi</div> 





<div class="blast">Mom</div> 
</div> 


然后 你 进行 了 如 下 的 Blast 调 用 : 


$("div").blast(false); 








那么 元 素 就 会 变 成 原来 的 样子 : 


<div> 
Hi Mom 
</div> 





你 也 许 好 奇 这 究 竞 是 如 何 实 现 的 : 当 Blast 进 行 反 转 操 作 时 , 它 只 是 简单 地 摧毁 生成 的 包装 器 
元 素 , 然后 把 纯 文 本 搬入 到 原 有 的 包装 器 元 素 里 面 。 请 注意 ,这 样 做 将 会 破坏 指派 给 新 生成 元 素 
的 事件 句柄 ， 但 是 不 会 破坏 Blast 第 一 次 调用 之 前 就 已 经 存在 的 HTML 上 的 事件 句柄 。 
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这 种 方式 的 Blast 反 转 操 作对 于 文本 动画 而 言 至 关 重 要 ， 因 为 给 网 页 上 的 元 素 设置 动画 之 后 ， 
还 要 让 这 些 元 素 恢复 原样 。 例如， 如 果 使 用 Blast 将 一 句 话 拆 分 成 单词 ,为 的 是 让 这 些 单词 一 个 个 
以 动画 方式 进入 视图 , 那么 就 要 在 动画 完成 之 后 ,接着 反 转 Blast 操 作 。 最 终 ， 以 后 与 文本 交互 的 
JavaScript 代 码 就 不 会 冒 出 一 些 出 乎 意料 的 子 元 素 需 要 解析 了 。 简 言 之 ,最 佳 做 法 是 : 尽量 避免 
HTML 代 码 变 得 过 分 腾 肿 ， 这 样 后 续 与 元 素 的 程序 交互 就 不 会 变 得 更 加 复杂 。 




















tk 注意 要 学 习 Blast 的 更 多 知识 ， 包 括 它 特有 的 搜索 功能 以 及 与 屏幕 阅读 软件 的 适 配 性 ， 请 
人 查看 Julian.com/research/blast 上 的 文档 。 





既然 现在 已 经 把 文本 元 素 拆 开 来 了 ， 是 时 候 给 它们 加 动画 了 。 


5.3 ”让 文本 过 渡 进 入 视图 或 离开 视图 


文本 动画 最 常见 的 用 法 就 是 让 文本 以 动画 方式 进入 或 离开 视图 。 其 中 一 个 基本 应 用 就 让 句子 
中 的 单词 一 个 接 一 个 地 进入 视图 。 











5.3.1 蔡 换 已 有 文本 


证 我 们 先 创建 一 个 div 容 器 ， 其 中 包含 占 位 文本 。 占 位 文本 将 会 被 以 动画 方式 进入 视图 的 新 
文本 蔡 代 : 





<div> 
A message will load here shortly... 
</div> 











由 于 这 个 div 一 开始 就 是 可 见 的 ,因此 用 Blast 将 div 的 文本 拆 成 的 子 文 本 元 素 也 是 可 见 的 。 既 
然 你 的 目标 是 让 新 生成 的 文本 元 素 从 初始 状态 不 可 见 变 成 可 见 , 那么 就 应 该 在 调用 Blast 之 后 马上 
将 生成 的 文本 元 素 设 置 为 不 可 见 : 





$("div’) 
.html("This is our new message.") 
.blast({ delimiter: "word" }) 
.Css("opacity", 0); 
.velocity({ opacity: 1 }); 
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以 上 代码 会 将 div 中 原 有 的 文本 替换 为 新 信息 。 然 后 用 Blast 以 word 为 分 隔 符 将 div 拆 分 开 来 。 
既然 Blast 往 jQuery 选择 器 链 上 返回 的 是 生成 的 文本 包装 器 元 素 , 因此 你 可 以 轻易 地 在 后 面 续 写 代 
码 , 将 每 个 文本 元 素 的 opacity 值 设 为 0。 这 样 就 使 元 素 做 好 准备 工作 , 进而 继续 调用 Velocity 函数 ， 
其 中 包含 一 个 简单 的 opacity 动 画 。 





























你 也 许 注意 到 了 ,上 述 代码 让 所 有 文本 部 分 同时 以 动画 方式 进入 视图 。 这 种 做 法 当然 有 违 使 
用 Blast 的 初衷 : 如 果 想 让 整个 div 的 内 容 同 时 以 动画 方式 进入 视图 ， 只 需要 简单 地 设置 div 本 身 的 
动画 就 可 以 了 。 但 我 们 这 里 的 目标 其 实 是 实现 一 个 连续 的 动画 序列 , 让 文本 元 素 一 个 接 一 个 地 以 
动画 方式 进入 视图 。 











5.3.2 ”错开 动画 


这 时 候 就 是 Velocity 的 UI pack 登 场 的 时 候 了 。( 如 果 你 需要 UI pack 的 入 门 说 明 的 话 ， 请 参考 
第 4 章 。) 要 给 一 个 元 素 集合 中 每 个 元 素 的 动画 开始 之 间 相 继 添 加 延迟 ， 要 使 用 Velocity UI pack 
中 的 stagger 选 项 ， 它 规定 的 是 以 毫秒 为 单位 的 一 段 时 间 。 将 其 用 于 前 面 的 代码 示例 ， 就 得 到 如 
下 代码 : 
































$("div") 
.html("This is our new message.") 
.blast({ delimiter: "word" }) 
.css("opacity", 0); 
.velocity("transition.fadeIn", { stagger: 50 }); 





上 面 的 代码 会 在 每 个 元 素 动 画 开始 之 前 相继 添加 一 个 50 毫 秒 的 延迟 。 重 要 的 是 ,请 注意 之 前 
Velocity 调用 中 的 { opacity: 1 } 参 数 被 替换 为 "transition.fadeIn"， 这 是 Velocity 的 UI pack 中 预 
制 的 淡 和 人 效果。( 如 果 你 需要 复习 一 下 的 话 , 请 参考 第 4 章 。) 由 于 stagger 选 项 可 以 与 UIpack 效 果 
一 起 使 用 ， 此 示例 显示 了 将 动画 opacity 仅 镜像 至 值 1 的 效果 。 




















正如 第 3 章 中 讨论 过 的 ， 要 注意 确保 错开 时 间 的 长 度 很 得， 这 样 用 户 在 文本 淡 和 人 时 就 不 会 浪 
费 不 必要 的 时 间 等 待 。 请 记 住 , 文 本 的 单词 数 越 多 ， 整 个 动画 序列 完成 的 时 间 就 越 长 。 错 开 文 本 
元 素 动画 是 最 容易 导致 拖 慢 界面 这 种 粳 糕 后 果 的 方式 之 一 。 









































5.3.3 ”过 渡 文本 离开 视图 


上 一 节 中 的 代码 示例 仅 展示 了 如 何 让 文本 以 动画 方式 进入 视图 , 而 未 展示 如 何 离开 视图 ; div 
中 原本 已 存在 的 文本 是 立即 被 新 信息 蔡 换 掉 的 。 这 种 做 法 不 一 定 会 导致 粳 糕 的 动 效 设计 , 但 从 动 
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效 设计 理论 的 角度 讲 ， 最 好 是 将 元 素 淡 出 的 动画 与 淡 入 的 动画 统一 起 来 。 第 3 章 讲 到 了 镜像 动画 


尼 
4Dv 








的 概念 ， 说 的 就 是 动画 怎么 来 就 应 让 它 


么 去 。 这 一 建议 在 山 


处 依然 适用 。 











如 果 想 让 文本 离开 的 动画 与 进入 的 动画 对 称 ， 可 以 重新 编写 代码 如 下 : 


// 选择 之 前 已 拆 分 的 文本 
$("div .blast").velocity( 
// 使 用 适当 的 UI pack 效 果 让 现 有 文本 以 动画 方式 离开 视 | 
"transition.fadeOut", 
{ 
// 像 错开 进入 动画 一 样 错开 离开 动画 
stagger: 50， 





backwards: true, 
// 当 文 本 离开 视图 的 动画 完成 以 后 ， 开 始 文本 进入 视图 的 
complete: function() { 
// 继续 进行 文本 进入 视图 的 动画 
$("div") 
.html (message) 
.blast({ delimiter: "word"” }) 
.Css("opacity", 0) 
.velocity({ opacity: 1 }, { stagger: 50 }); 





} 
} 
); 








动画 


以 上 代码 首先 在 之 前 div 拆 分 后 生成 的 文本 部 分 上 调用 了 Velocity UI pack 中 的 "transition. 





fade0ut" 效 果 。 就 像 进入 方向 的 动画 一 样 , 在 离开 方向 上 
继 错开 一 定时 间 。 此 调用 中 新 使 用 了 Velocity UI pack 的 b 





，stagger 选 项 为 每 个 文本 部 分 的 动画 相 
ackwards 选 项 ， 该 选项 可 以 与 stagger 搭 





配 使 用 来 反 转 目标 元 素 集 的 顺序 这样， 最 后 一 个 元 素 ( 


元 素 先 以 动画 方式 离开 视图 ; 而 倒数 第 二 个 元 素 比 倒数 第 








句子 中 的 最 后 一 个 单词 ) 比 倒数 第 二 个 
三 个 元 素 先 以 动画 方式 离开 视图 ,以 此 








类 推 。 当 离开 视图 的 动画 序列 完成 之 后 ， 就 会 从 complete 回 调 中 调用 进入 视图 的 动画 了 。 





在 文本 动画 中 使 用 backward 选 项 带 来 两 点 好 处 。 首 先 , 便于 与 进入 方向 的 动画 对 称 ( 创建 顺 
序 完全 颠倒 的 动画 )。 进 入 动画 中 , 第 一 个 单词 是 先 于 第 二 个 单词 进入 视图 的 ,以 此 类 推 。 第 二 ， 


当 倒序 的 动画 后 面 马 上 接着 一 个 正 序 的 动画 , 会 产生 一 种 优雅 的 链 式 效 





四 


果 , 倒序 方向 上 的 最 后 一 


























个 单词 和 正 序 方向 上 的 第 一 个 单词 是 紧 接 着 出 现 的 。 这 村 





和 就 把 两 个 动画 序列 绑 在 了 一 起 , 让 人 看 


起 来 好 像 是 一 个 动画 整体 ， 而 非 两 个 强行 粘 在 一 起 的 单独 动画 。 
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5.4 过 渡 单个 文本 部 分 


电影 字幕 序列 以 其 别出心裁 的 排版 动 效 设计 而 闻名 。 它 的 很 多 效果 都 依赖 于 一 种 技术 , 那 就 
是 挑 出 单个 文本 元 素 以 设置 其 动画 。 这 也 正 是 本 节 要 讲 到 的 内 容 。 























tk 注意 ”要 想 寻找 排版 动画 的 灵感 ,可 以 到 YouTube 上 搜索 电影 字幕 来 看 ,并且 记 下 详细 笔记 ! 
A 只 要 始终 牢记 动 效 设计 理论 的 几 条 原则 ， 你 应 该 对 自己 在 界面 上 探索 文本 动画 设计 


充满 信心 。 


要 想 对 Blast 生 成 的 元 素 进行 精细 控制 ， 只 需要 使 用 CSS 中 的 nth-child 选 择 器 或 jQuery 中 的 
eq() 函 数 。 两 者 的 行为 基本 一 致 ， 都 可 以 让 你 在 元 素 集 合 中 ， 基 于 元 素 的 索引 值 来 选择 某 一 个 元 
素 。 如 果 将 整数 3 传 到 CSS 的 选择 器 中 (或 将 2 传人 jQuery 函数 中 ,正如 你 将 要 看 到 的 ), 它们 会 在 
整个 元 素 集合 〈 即 多 个 单词 组 成 的 句子 ) 中 锁定 第 三 个 元 素 ( 即 第 三 个 单词 ): 











// CSS 的 做 法 
.blast:nth-child(3) { 
color: red; 


} 
// jQuery 的 做 法 


$(".blast").eq(2).css("color", "red"); 5 
上 面 两 个 例子 都 选中 了 页 面 上 拥有 .blast 类 的 元 素 集合 中 ， 排 在 第 三 位 的 元 素 。( 注意 ， 
jQuery 的 eq 函数 是 从 0 开始 计数 的 ， 而 CSS 中 的 nth-child 是 从 1 开始 计数 的 ， 因 此 传人 两 者 中 的 整 
数 并 不 相同 。) 让 我 们 继续 采用 jQuery 函数 来 实现 一 个 更 复杂 的 例子 : 























<div> 
Current status: paused 
</div> 
// 以 单词 为 分 隔 符 拆 分 div 
$("div").blast({ delimiter: "word"” }) 
// 选择 向 子 中 的 第 三 个 单词 (也 就 是 文本 内 容 为 paused 的 span 元 素 ) 
.eq(2 
// 淡出 第 三 个 元 素 ， 然 后 用 新 信息 替换 里 面 的 文本 内 容 
.Velocity({ opacity: 0 }, function() { $(this).text("running"); }) 
// 淡 入 替换 后 的 文本 
.Velocity({ opacity: 1 }); 





以 上 代码 先 将 一 个 句子 拆 分 ， 然 后 选择 了 第 三 个 单词 (paused )， 将 其 淡出 ， 然 后 替换 淡出 
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的 单词 为 新 单词 (running )， 然 后 将 新 单词 淡 入 。 最 终 效果 是 句子 中 用 于 指示 状态 的 关键 词 优美 
地 替换 成 了 新 单词 ,提醒 用 户 状 态 发 生 了 改变 。 这 是 一 个 非常 优雅 的 效果 , 但 所 用 的 代码 仅 几 行 
而 已 。 如 果 将 这 一 效果 多 次 用 在 一 个 较 大 的 文本 块 上 , 得 到 的 效果 就 是 一 条 信息 断断续续 地 变 成 
了 为 一 条 信息 。 
































5.5 华丽 地 过 渡 文 本 


迄今 为 止 用 到 的 都 是 transition.fadeIn 过 渡 效 果 ， 其 实 你 可 以 轻松 地 将 其 替换 为 Velocity UI 
pack 中 的 其 他 效果 。 其 中 有 一 些 还 很 华丽 ， 包 括 transition.shrinkIn 效 果 ， 它 使 元 素 由 大 变 小 进 
人 视图 ; transition.perspectiveDownIn 效 果 ， 它 使 元 素 像 一 扇 百 叶 窗 那 样 旋转 向 下 进入 视图 。 
(永远 要 记 住 ， 不 论 你 的 效果 多 么 复杂 ， 都 必须 遵循 第 3 章 中 讨论 的 那儿 条 原则 。 ) 














tk 注意 ”要 获得 UI pack 所 有 效果 的 列表 ， 包 括 在 线 示 例 ， 请 访问 VelocityJS.org/#uiPack。 
A 
请 记 住 ， 有 些 效果 使 用 了 3D 变 换 ( rotateX、rotateY 和 translatez )， 这 些 效果 不 能 用 于 CSS 
中 display 值 为 "inline" 的 元 素 ， 尤 其 要 注意 span 和 anchor 元 素 ， 因 为 它们 display 的 默认 值 就 是 
"inline"。 有 一 种 迁 回 解决 的 办 法 : 将 Blast 生 成 的 文本 元 素 的 display 值 设置 为 "inline-block"。 
这 样 做 可 以 保持 "inline" 元 素 的 正常 行为 , 同时 又 额外 给 它们 "block" 元 素 ( 如 div 和 p ) 特有 的 功 
能 ， 可 以 为 它们 设置 与 位 置 相关 的 属性 ， 包 括 3D 变 换 在 内 。 考 虑 到 此 display 扭 曲 ， 进 入 视图 的 
文本 过 渡 示 例 现 在 就 可 以 写成 下 面 这 样 : 















































$("div’) 
.html(message) 
.blast({ delimiter: "word" }) 
.Css({ opacity: 0, display: "inline-block” }) 
.velocity("transition.perspectiveDownIn", { stagger: 50 }); 


这 样 就 在 jQuery 的 C55() 函 数 将 元 素 opacity 值 设 为 初始 值 0 的 同一 个 调用 中 , 将 拆 分 后 文本 部 
分 的 display 值 设 为 了 "inline-block"。 
5.6 文字 装饰 


针对 文本 动画 讨论 的 最 后 一 个 话题 是 装饰 这 一 概念 , 就 是 在 周围 持续 呈现 效果 , 用 以 实现 审 
美 目的 的 动画 。 一 个 例子 可 能 是 一 串 文 本 像 快要 灭 掉 的 灯泡 一 样 一 内 一 内 。 另 一 个 例子 可 能 是 一 
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句 话 中 所 有 单词 的 颜色 总 是 从 一 种 蓝 变 成 男 一 种 蓝 。 
这 两 种 做 法 都 是 坏 主 意 。 




















这 种 效果 分 散 了 用 户 的 注意 力 , 最 终 取 悦 的 只 是 那些 喜欢 摆弄 动 效 设计 的 开发 人 员 自 己 。 永 
远 不 要 为 了 动画 而 动画 ; 如 果 你 的 页 面 的 某 一 部 分 毫 无 意义 地 将 用 户 的 注意 力 从 实用 功能 那里 吸 
引 开 ， 那 就 从 头 再 来 吧 。 











唯一 的 例外 是 状态 指示 絮 ( 比如 “正在 加 载 ……” 这 样 的 文字 )， 它 可 以 让 用 户 及 时 了 解 界 
面 在 做 些 什么 。 状 态 指 示 器 适合 进行 文字 装饰 ,因为 这 样 的 装饰 会 告诉 用 户 界 面 正在 处 理 数据 ( 而 
不 是 卡 在 了 那里 )。 通 过 这 种 方式 ， 文 字 装 饰 就 好 像 网 页 的 心电图 一 样 吸引 人 们 的 眼球 。 




































































既然 文字 装饰 通常 被 认为 是 粳 糕 的 做 法 , 那么 为 什么 还 要 把 本 贡 写 在 书 里 面 呢 ? 这 是 因为 未 
使 用 动画 效果 的 装饰 经 常 是 很 棒 的 想法 ! 把 这 当 作 Blast 提 供 的 非 动画 红利 吧 : 你 可 以 为 Blast 生 成 
的 文本 元 素 添加 样式 ， 从 而 实现 五 彩 拼 贴 或 其 他 独特 的 排版 设计 。 例 如 , 可 以 把 网 站 的 标语 文字 
(“将 快乐 送 货 上 门 1”) 按 单词 拆 开 ， 然 后 依次 减少 每 个 单词 的 opacity 值 ， 这 样 就 使 整个 句子 产生 
了 一 种 微妙 的 渐变 效果 。 代 码 如 下 : 




















<div> 
Hi Mom 

</div> 

// 将 div 用 Blast 拆 开 ， 然 后 遍历 生成 的 文本 元 素 

$("div").blast({ delimiter: "character" }).each(function(i, element) { 
// 使 用 任意 公式 依次 减少 每 个 元 素 的 0apcity 值 
var adjustedopacity = 1 - i/10; 





element.style.opacity = adjustedOpacity; 
]); 





如 果 不 迭 代 改 变 opacity 值 的 话 ， 也 可 以 通过 循环 改变 RGB 值 来 创造 一 种 基于 颜色 的 渐变 效 
果 。 例 如 ， 如 果 给 原本 灰色 的 文本 逐渐 增加 蓝 色 分 量 ， 就 会 得 到 这 样 一 组 元 素 : 从 开头 到 结 
蓝 色 变 得 越 来 越 浓 : 


// 将 div 用 Blast 拆 开 ， 然 后 遍历 生成 的 文本 元 素 

$("div").blast({ delimiter: "character" }).each(function(i, element) { 
// 使 用 任意 公式 依次 为 每 个 元 素 增加 蓝 色 分 量 
var adjustedBlue = i*20; 

element.style.opacity = "rgb(0, 0," + adjustedBlue + ")"; 

]); 
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记 住 : 形式 


要 服从 功能 。 





5.7 小 结 


本 章 只 是 抛砖引玉 地 探讨 了 一 下 颗粒 化 文本 控制 的 可 能 性 。 其 他 还 有 许多 技巧 值得 探索 , 例 
如 精细 调节 一 个 单词 中 每 个 字母 的 位 置 来 生成 拼 由 效果, 或 者 让 单词 于 成一 个 圆圈 来 模仿 你 可 能 
在 杯 垫 上 见 到 过 的 排版 设计 。 











尽管 这 些 技巧 也 许 适合 用 到 主页 中 央 的 大 标题 上 , 但 它们 可 能 并 不 适用 于 UI 中 需要 与 用 户 反 
复 交 互 的 重要 板块 上 ,为 什么 ? 这 是 因为 有 样式 的 文本 比 没有 样式 的 文本 更 难 一 眼 就 看 懂 。 但 是 ， 
如 果 能 考虑 到 形式 与 功能 之 间 的 平衡 性 ， 那 么 你 会 做 得 很 好 。 


第 CO 章 
SVG 入 门 





要 深入 地 为 SVG ( 可 缩放 失 量 图 ) 写 教程 ， 很 容易 就 能 写成 
一 本 书 了 。 有 鉴于 此 ， 本 章 只 是 为 这 个 话题 起 个 头 儿 ， 目 的 在 于 
让 你 掌握 充分 的 知识 ， 可 以 顺畅 地 为 SVG 元 素 添加 动画 ， 还 能 
解 从 哪里 能 够 继续 深入 学 习 。 
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6.1 用 代码 创建 图 片 


SVG 元 素 是 DOM 元 素 的 一 种 类 型 ， 它 借用 了 我 们 已 熟知 的 HTML 元 素 的 写法 来 定义 任意 图 
形 。SVG 元 素 与 HTML 元素 的 不 同 之 处 在 于 它们 具备 特有 的 标签 、 属 性 和 行为 ， 可 以 用 来 定义 图 
形 。 换 言 之 ,SVG 使 你 能 够 用 代码 创建 图 片 。 这 一 概念 无 比 强大 ,原因 在 于 这 意味 着 你 可 以 使 用 
JavaScript 和 CSS， 以 编程 的 方式 为 这 些 图 形 添加 样式 和 动画 。 另 外 ，SVG 还 具备 很 多 其 他 优点 。 





























DSVG 的 压缩 性 异常 的 好 。 用 SVG 定义 的 图 形 比 同样 的 PNGJPEG 图 片 要 小 ,这 可 以 极 大 地 
缩短 网 站 加 载 时 间 。 

口 SVG 图 形 可 以 缩放 至 任意 分 辩 率 并 且 不 损失 清晰 度 。 与 其 他 标准 图 片 格式 不 同 ， 它 在 所 
有 设备 上 都 边缘 清晰 ， 该 是 向 移动 设备 屏幕 上 的 那些 模糊 的 图 片 说 再 见 的 时 候 了 。 

D 就 像 HTML 元素 一 样 ， 你 可 以 为 SVG 元 素 指 定 一 个 事件 句柄 ， 响 应 用 户 的 输入 。 这 意味 着 
页 面 上 的 图 片 也 可 以 具有 交互 性 。 如 果 你 乐意 , 可 以 把 网 站 上 所 有 的 按钮 都 换 成 动态 图 形 。 
口 许多 照片 编辑 应 用 ( 包括 Adobe Photoshop 、Sketch 和 Inkscape ) 都 可 以 将 设计 作品 导出 成 
SVG 格式 ， 可 以 直接 复制 粘贴 到 HTML 当 中 。 因 此 ， 即 使 你 自 认 不 是 个 艺术 家 , 也 可 以 借 
助 第 三 方 应 用 来 自己 做 设计 。 


































































































简 而 言 之 ，SVG 是 不 可 思议 的 图 形 解决 方案 。 接 下 来 让 我 们 继续 深入 了 解 ! 








6.2 SVG 标记 的 写 、 























SVG 元 素 是 用 父 级 <svg> 容 器 进行 定义 的 。 为 该 容器 元 素 指 定 宽 高 ， 这 样 就 为 SVG 图 形 演 染 
定义 了 画布 : 
<svg version="1.1" width="500" height="500" xmlns="http://www.w3.org/2000/svg"> 
<circle cx="100" cy="100" r="30" /> 


<rect id="rect"” x="100" y="100" width="200" height="200" /> 
</svg> 


在 <svg> 里 面 ， 可 以 插入 各 种 SVG 图 形 元 素 。 上 面 的 例子 中 有 一 个 circle ( 圆 形 ) 元 素 , 后 
面 跟 着 一 个 rect (长 方形 ) 元 素 。 正 如 普通 的 HTML 元 素 ，SVG 元 素 也 接受 height 和 width 属 性 ， 
此 处 这 些 属性 是 用 于 演示 目的 。 但 是 ， 就 像 HTML 一 样 ，SVG 样 式 属性 的 设置 最 好 在 CSS 样 式 表 
中 完成 。 还 是 像 HTML 一 样 ， 样 式 表 类 通过 其 id、class 或 标签 类 型 以 SVG 元 素 为 目标 。 
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SVG 与 HTML 在 设置 上 的 本 质 不同 在 于 它们 所 接受 的 HTML 属 性 和 CSS 属 性 的 范围 是 不 同 
的 。SVG 元 素 只 接受 几 个 标准 CSS 属 性 。 此 外 ，SVG 还 接受 一 组 被 称 为 表象 属性 (presentational 
attribute ) 的 特殊 属性 ， 包 括 fil1、x 和 y。( fi11 指 定 图 形 填充 的 颜色 ; x 和 y 定 义 了 元 素 左上 角 的 
坐标 。) 这 些 属 性 定义 了 元 素 如 何在 画布 上 进行 视觉 呈现 。 让 我 们 以 rect 作 为 SVG 元 素 的 例子 ， 
依次 了 解 一 下 这 些 属性 : 






































<rect id="rect” x="100" y="100" width="200" height="200" /> 








此 处 ，width 和 height 属 性 跟 你 预想 的 作用 一 样 ， 不 再 歼 述 。 特 有 的 x 和 y 属 性 定义 了 长 方形 在 
画布 中 的 坐标 。 这 些 值 简单 地 指示 了 长 方形 相对 于 原点 (x=0, y=0 ) 的 位 置 。 这 里 与 HTML 不 同 ， 
SVG 的 定位 不 是 通过 CSS 的 top、right、bottom、left、float 或 margin 属 性 来 定义 的 ; 它 的 定位 
逻辑 完全 是 通过 明确 定义 的 坐标 来 决定 的 。 换 名 话说 , 一 个 SVG 元 素 的 定位 不 会 影响 到 它 的 兄弟 
元 素 ; 它 不 会 在 页 面 上 把 兄弟 元 素 挤 到 一 边 ， 而 是 会 重 闭 起 来 。 












































现在 ， 让 我 们 看 一 下 circle 元 素 。 它 的 泻 染 是 通过 圆 形 的 圆心 坐标 〈cx 和 cy ) 以 及 半径 长 度 
(了) 决定 的 : 


<circle cx="100" cy="100" r="30" /> 





很 简单 ， 对 吗 ? SVG 元 素 的 标记 结构 与 HTML 元 素 相 同 ， 因 此 本 章 中 所 有 的 代码 示例 看 起 来 
都 挺 眼熟 。 





注意 ，SVG 元 素 还 有 许多 其 他 类 型 ， 包 括 ellipse (椭圆 )、line ( 直线 ) 和 text (文本 )。 要 了 
解 更 多 详情 ， 请 参见 本 章 结尾 。 


6.3 SVG 样式 设置 


SVG 元 素 接受 各 种 特殊 的 样式 属性 ， 这 些 属 性 并 不 适用 于 HTML 元 素 。 例 如 ，SVG 的 fil1 属 
性 类 似 于 CSS 中 的 background-color ，stroke 属 性 类 似 于 border-color ，stroke-width 类 似 于 
border-width。 让 我 们 看 下 面 这 个 例子 : 

















<svg version="1.1" width="500" height="500" xmlns="http://www.w3.0org/2000/svg"> 

<circle cx="100" cy="100" r="30" style="fill: blue" /> 

<rect id="rect" x="100" y="100" width="200" height="200" style="fill: green; stroke: red; 
stroke-width: 5px” /> 
</svg> 
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上 例 中 ，circle 元 素 是 使 用 纯 蓝 色 填 充 的 ，rect 元 素 是 使 用 纯 绿 色 填 充 的 。 另 外 ， 长 方形 有 
一 个 5 像素 宽 的 红色 边框 。 

















SVG 特 有 的 样式 属性 还 有 许多 。 目前 , 你 只 需要 知道 它们 存在 ， 这样， 在 尝试 设置 SVG 元 素 
上 的 CSS 属 性 的 动画 时 ， 你 可 以 额外 留心 一 下 。 














< 注意 请 办 考 本 训 最 后 的 “小 结 "， 查 看 所 有 SVG 样 式 属性 的 完整 列表 。 
= 


6.4 对 SVG 的 支持 


现成 的 对 SVG 元 素 动 画 的 支持 都 不 太 完 美 : 不 论 jQuery 还 是 CSS， 对 SVG 特有 的 样式 属性 和 
表象 属性 都 支持 得 不 完全 。 另 外 ，CSS 过 渡 根 本 不 能 在 Internet Explorer 9 上 设置 SVG 元 素 的 动画 ; 
Internet Explorer 的 任何 版 本 都 不 支持 使 用 CSS 将 transform ( 变换 ) 动画 应 用 于 SVG 元 素 。 











要 想 获得 全 面 的 SVG 动画 支持 ,要么 使 用 专门 的 SVG 库 ,， 要 么 使 用 内 置 了 支持 SVG 元 素 的 动 
画 库 。 有 一 个 专门 的 SVG 库 值 得 关注 ， 那 就 是 Snap.svg。 另 外 ， 本 书 中 一 直 使 用 的 JavaScript 动 画 
库 Velocityjs 也 提供 了 对 SVG 元 素 动 画 的 完整 支持 ， 这 点 也 许 已 在 你 意料 之 中 。 


tk 注意 ”可 前 往 SnapSVG.io 下 载 Snap.svg 库 。 


= 











6.5 SVG 动画 























SVG 元 素 也 许 永 远 也 成 不 了 UI 中 的 主力 , 但 是 在 原本 通常 使 用 静态 图 片 的 位 置 使 用 它 , 确实 
会 为 页 面 增添 一 些 情趣 。SVG 的 用 例 包括 下 面 几 个 。 














口 具有 复杂 动画 序列 的 按钮 ， 用 户 悬 停 鼠 标 或 点 击 鼠 标 时 会 触发 这 些 动画 序列 。 
口 独特 的 加 载 状 态 图 形 ， 可 以 用 来 替代 老 掉 牙 的 转圈 指示 器 GIF 图 。 
口 公司 logo， 在 页 面 加 载 时 ，logo 的 各 个 部 分 可 以 一 起 以 动画 形式 呈现 。 





本 章 稍 后 会 详细 探讨 最 后 一 个 用 例 。 
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6.5.1 传 入 属性 


使 用 Velocity 时 , 设置 SVG 属性 的 动画 的 方式 与 设置 标准 CSS 属 性 的 动画 的 方式 相同 。 将 适当 
的 属性 名 称 以 及 想 要 的 最 终 值 传人 Velocity 的 属性 对 象 中 : 


























一 


// 设置 SVG 元 素 填充 红色 和 使 用 黑色 边框 的 动画 
$svgElement .Velocity({ fill: "#ff0000", stroke: "#000000" }); 








对 比 之 下 ， 下 面 的 代码 就 起 不 了 作用 ， 这 是 因为 SVG 元 素 并 不 支持 其 中 的 CSS 属 性 : 


// 错误 : 这 些 属性 并 不 适用 于 SVG 元 素 
$svgElement .Velocity({ borderSize: "5px", borderColor: "#000000" }); 


6.5.2 ”表象 属性 
本 章 前 面谈 到 过 的 表象 属性 也 可 以 按照 预期 设置 动画 : 





到 [| 





/ 


ee 


设置 长 方形 的 X、y 坐 标的 动画 
$("rect").velocity({ x: 100, y: 100 }); 

// 设置 国 的 cs、cy 坐 标的 动画 
$("circle").velocity({ cx: 100, cy: 100 }); 

// 设置 长 方形 尺寸 的 动画 

$("rect").velocity({ width: 200, height: 200 }); 
// 设置 圆 的 半径 的 动画 

"circ").velocity({ r: 100 }); 

















所 有 你 正在 使 用 的 Velocity 功 能 ( 比如 动画 反 转 、UI pack 效 果 、 序 列 触发 等 等 ) 同样 也 适用 
于 SVG 元 素 。 





6.5.3 定位 属性 (positional attribute) VS 变换 (transform) 





pol 








你 可 能 想 知 道 用 定位 属性 (x、cx、y 和 cy ) 来 设置 SVG 元 素 的 位 置 与 用 CSS 变 换 ( 例如 
translateX、translateY ) 有 什么 不 同 。 答 案 是 浏览 器 支持 性 不 同 。IE 浏 览 嚣 (直到 IE 11 ) 都 不 
支持 在 SVG 元 素 上 使 用 CSS 变 换 。 请 看 下 面 的 例子 : 








// 只 要 SVG 元 素 支 持 ，X、y 属 性 就 起 作用 (IE8 以 上 版 本 ，Android 3 以 上 版 本 ) 
$("rect").velocity({ x: 100, y: 100 }); 

// 然而 ， 定 位 变换 (例如 tfanslateX 和 translateY) 只 在 ** 除 IE 浏 览 器 之 外 ** 的 其 他 浏览 器 上 起 作用 
$("rect").velocity({ translateX: 100, translateY: 100 }); 


ws 
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注意 尽管 众所周知 ， 变 换 由 于 硬件 加 速 而 性 能 格外 出 众 (请 阅读 第 7 章 了 解 详情 )， 但 上 
述 两 种 SVG 动画 实现 方式 速度 是 一 样 快 的 ， 因 为 SVG 图 形 默认 就 是 硬件 加 速 的 。 


SVG 能 让 你 
走出 长 万 形 


的 棕 格 。 





6.6 ”应 用 实例 : logo 动画 


高 分 辩 率 网 站 的 logo 可 以 在 页 面 加 载 完 成 时 让 动画 运行 到 位 ， 这 是 SVG 实 施 的 一 个 理想 应 
用 。 假 设 你 想 简单 地 复制 一 下 万 事 达 信用 卡 的 logo， 该 logo 包 括 两 个 相互 重奏 的 不 同 颜色 的 圆 。 
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如 果 要 使 用 Velocity 让 这 个 logo 的 动画 运行 到 位 ， 可 以 先 定 义 SVG 画 布 ， 代 码 如 下 : 


<svg version="1.1" width="500" height="500" xmlns="http://www.w3.o0org/2000/svg"> 
<circle id="circlelLeft" cx="100" cy="100" r="30" style="fill: red" /> 
<circle id="circleRight" cx="100" cy="100" r="30"style="fill: orange” /> 
</svg> 


以 上 代码 创建 了 两 个 半径 相同 并 部 分 重 释 的 圆 。 接 下 来 , 要 设置 这 两 个 圆 从 其 初始 位 置 向 外 
远离 的 动画 ， 使 它们 在 运行 动画 之 后 ， 仅 有 轻微 的 重 和 : 





// 将 其 中 一 个 圆 向 左 移 

$("#CcircleLeft").velocity({ cx: "-=15px" }, { easing: "spring” }); 
// 将 另 一 个 圆 向 右 移 

$("#circleRight").velocity({ cx: "+=15px”}，{ easing: "spring" }); 











在 这 里 ， 左 边 的 圆 向 左 移 动 了 15 像 素 ( 用 "-=" 运 算 符 指 示 Velocity 从 当前 圆 的 cx 值 减 去 15 ); 
右边 的 圆 向 右 移动 了 15 像 素 。spring 绥 动 为 动画 增添 了 一 点 花样 ， 使 两 个 圆 好 像 互 相 推 挤 着 弹 到 
两 边 。 

















既然 SVG 元 素 可 以 监听 基于 鼠标 的 事件 (点击 、 悬 停 等 )， 那 么 就 可 以 进一步 优化 示例 ， 把 
SVG 元 素 变 成 可 以 交互 的 。 在 jQuery 和 Velocity 的 帮助 下 ，SVG 动 画 版 应 用 就 像 下 面 这样 实 现 了 : 








$("svg").on("mouseover mouseout", function() { 
$("#circlelLeft, #circleRight").velocity("reverse"); 


]); 


以 上 代码 在 用 户 鼠 标 悬 停 在 SVG 元 素 上 方 或 从 其 移 开 时 触发 了 两 个 圆 的 页 面 加 载 动画 的 反 
转 。 利 用 Velocity 的 reverse 动 画 命令 ， 仅 需 一 行 代码 就 完成 了 这 项 工作 。 要 了 解 Teverse 的 更 多 详 
情 ， 请 参考 第 2 章 。 事 实 上 ， 当 用 户 第 一 次 鼠标 移 和 人 时 ， 进 行 的 是 与 页 面 加载 时 相反 的 动画 。 当 
用 户 后 来 移出 鼠标 时 ， 动 画 又 再 次 反 转 了 一 次 ， 使 得 logo 恢 复 到 了 原来 的 形态 。 





























尽管 这 个 代码 实例 确实 有 点 虎 头 蛇 尾 , 不 过 它 确 实 是 个 好 例子 , 因为 它 反 映 了 设置 SVG 元 素 
的 动画 与 设置 HTML 元 素 的 动画 之 间 的 相似 之 处 。SVG 变 得 格外 复杂 的 地 方 是 想 要 定义 任意 形状 
而 非 正方 形 、 长 方形 、 圆 形 这 种 基本 形状 的 时 候 。 毕 范 ，SVG 元 素 可 以 定义 你 在 图 片 编辑 器 中 可 
以 想象 到 的 任意 图 形 ， 因 此 它们 必须 具有 强大 的 表现 力 。 而 且 它们 也 确实 如 此 。 但 是 , 精通 SVG 
设计 已 经 超出 了 本 书 的 范围 。 请 看 本 章 的 “小 结 ”"， 了 解 在 哪里 可 以 继续 深入 学 习 。 
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6.7 小 结 





如 果 你 对 读 到 的 东西 迷 住 了 ， 想 要 学 习 有 关 SVG 的 更 多 知识 ,请 看 看 以 下 优秀 的 资源 。 


口 要 对 SVG 元 素 有 个 全 面 的 认识 ， 请 参考 Joni Trythall 精 彩 绝伦 并 且 免 费 的 SVG 口袋 指南 
(https://github.com/jonitrythall/svgpocketguide )。 

口 要 想 了 解 SVG 元 素 所 有 的 类 型 及 属性 , 请 访问 Mozilla Developer Network( https://developer. 
mozilla.org/en-US/docs/Web/SVG )。 
口 要 想 获 取 Velocity 可 以 设置 动画 的 所 有 SVG 属性 及 样式 属性 列表 ， 请 参考 VelocityJS. 
org/#svgo 


























性 能 影响 一 切 。 性 能 提高 ， 无 论 是 表面 上 的 还 是 实际 上 的 ， 
都 能 巨 幅 提升 用 户 体 验 ， 继 而 提高 公司 的 赢利 。 许 多 重要 研究 表 
明 , 搜索 引擎 的 等 待 时 间 增 长 会 显著 降低 每 用 户 收 入 。 直 白 点 说 ， 
人 们 厌恶 等 待 。 


正如 第 1 章 中 介绍 的 那样 , JavaScript 动 画 的 性 能 并 不 亚 于 CSS 
动画 。 因 此 ， 如 果 使 用 了 现代 的 动画 库 ， 例 如 Velocity， 那 么 动画 
引擎 的 性 能 将 不 再 是 app 的 瓶颈 ,构成 瓶颈 的 只 有 代码 。 而 这 正 是 
本 章 所 要 探讨 的 : 为 所 有 浏览 器 和 设备 编写 高 性 能 动画 代码 的 
技巧 。 


7.1 网 络 性 能 的 实际 情况 


如 果 想 知道 为 什么 同时 运行 动画 会 减 慢 UI 速 度 ， 或 者 为 什么 你 的 网 站 在 移动 设备 上 变 得 很 
曼 ， 你 应 该 读 读本 章 内 容 。 





漳 

















动画 是 浏览 器 运行 中 资源 非常 密集 的 进程 , 但 是 有 很 多 技术 能 够 帮助 浏览 器 尽 可 能 高 效 地 运 
行 。 我 们 马上 就 会 学 到 这 些 技术 。 

















从 UI 设计 的 角度 讲 ， 盛赞 移 动 优先 、 响 应 式 网 站 的 文章 并 没有 任何 不 足 。 相 反 ， 从 UI 性 能 的 
角度 讲 , 作为 开发 人 员 , 我 们 中 的 大 多 数 人 都 对 提升 性 能 的 最 佳 实践 和 做 法 一 无 所 知 。 想 了 解 网 
络 性 能 的 最 新 现状 需要 了 解 铺天盖地 的 信息 , 而 且 通 常 都 是 徒劳 ; 我 们 都 已 受 缚 于 浏览 器 和 设备 
的 各 种 怪异 模式 ,充斥 在 整个 生态 系统 当中 的 各 种 设备 ( 台式 电脑 、 智 能 手机 和 平板 电脑 ) 和 浏 
览 带 ( Chrome 、Android、Firefox 、Safari 和 IE ) 的 副产品 。 鉴 于 这 些 平台 总 是 在 更 新 ， 所 以 不 出 
意料 的 是 我 们 经 常会 举 双手 投降 , 把 对 于 性 能 的 顾虑 尽 可 能 放 在 一 边 。 有 时 候 , 我 们 甚至 可 能 会 
忍 不 住 把 所 有 动画 一 并 去 掉 ， 因 为 拿 不 准 它们 会 不 会 影响 性 能 。 


















































我 们 告诉 自己 : 


既然 设备 在 越 变 越 快 ,而且 用 户 也 在 不 断 更 新 他 们 的 硬件 ,所 以 我 的 网 站 性 能 会 逐 
渐 提升 。 








但 不 幸 的 是 ,整个 情况 实际 上 是 完全 是 倒 过 来 的 : 发 展 中 国家 所 采用 的 智能 手机 ,性 能 敌 不 
过 我 们 口袋 里 最 新 版 的 Phone。 难 倒 你 真 的 想 放弃 为 未 来 几 十 亿 新 网 民 创 造 产品 吗 ? 即 将 到 来 的 
Firefox OS 已 经 摆 开 了 架势 ， 要 为 数 百 万 人 带 来 高 性 能 的 智能 手机 ， 因 此 我 们 不 只 是 在 美 滋 滋 地 
想当然 。 移 动 革命 就 在 当下 。 


BE 注意 ”爱立信 的 报告 称 ,全球 的 智能 手机 用 户 将 在 未 来 5 年 内 从 19 亿 增长 到 59 亿 ,而 其 中 绝 
I 大 多 数 来 自发 展 中 国家 。 
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性 能 


A 





如 果 你 的 第 一 反应 是 “这 不 关 我 事 ， 我 的 应 用 只 是 为 发 达 国 家 中 技术 高 超 的 中 产 阶级 设计 
的 "， 那 么 你 大 可 以 放心 ， 因 为 你 那 邪 恶 的 网 络 开 发 同仁 正 坐 在 千里 之 帝 不 断 盘 算 着 ， 要 付出 必 
要 努力 在 低 端 设备 上 提供 优秀 体验 ， 从 而 先 于 你 进入 那个 新 兴 市 场 。( 事实 上 ， 致 力 于 此 的 是 一 
个 庞大 的 开发 军团 ， 请 在 Google 上 搜索 Rocket Internet。 ) 





另外 , 忽视 性 能 问题 还 会 带 来 另 一 个 堪忧 的 事实 。 那 就 是 我 们 经 常 犯 这 样 一 个 错误 : 总 是 在 
设备 处 于 理想 负载 的 ' 试 我 们 的 网 站 。 但 事实 上 ， 毫 无 疑问 , 用 户 会 同时 开 很 多 应 用 和 浏 
览 器 标签 页 。 他 们 的 设备 在 任何 指定 时 间 都 是 在 超时 处 理 十 几 个 任务 。 相 应 地 ， 你 为 应 用 所 设置 

的 性 能 基准 线 并 不 符合 真实 世界 的 性 能 状况 。 哎 呀 ! 





但 是 别 害怕 ， 聪 明 的 开发 人 员 。 是 时 候 探 索 可 用 的 性 能 技术 ， 给 你 的 动画 编程 升 升级 了 。 


7.2 技术 : 去 除 布局 颠 毓 


布局 颠 艇 ， 即 DOM 操 作 缺 乏 同 步 性 ， 是 拖 垮 动画 性 能 的 巨 无 霸 。 对 它 虽 没有 轻松 的 解决 办 
法 ， 但 却 有 最 佳 实践 。 让 我 们 继续 来 看 。 

















7.2.1 问题 





考虑 一 下 网 页 操作 是 如 何 进行 设置 ( setting ) 和 获取 ( getting ) 这 两 项 任务 的 : 你 可 以 设置 
(更 新 ) 或 获取 ( 查询 ) 一 个 元 素 的 CSS 属 性 。 同 理 ， 可 以 往 页 面 里 插入 新 元 素 (设置 ) 或 者 从 
页 面 里 查询 一 组 已 存在 元 素 ( 获取 )。 获 取 和 设置 是 引发 性 能 开销 的 两 个 核心 浏览 器 进程 (另外 
还 有 图 形 泻 染 )。 可 以 这 样 来 想 这 个 问题 ， 在 为 元 素 设 置 了 新 属性 以 后 ， 浏 览 器 必须 计算 你 这 次 
更 改 所 产生 的 后 续 影 响 。 例如， 改变 一 个 元 素 的 宽度 会 导致 一 系列 连锁 反应 ; 它 的 父 级 元 素 、 兄 
第 元 素 和 子 元 素 的 宽度 根据 各 自 的 CSS 属 性 也 要 调整 。 












































由 设置 和 获取 的 交 蔡 而 导致 的 UI 性 能 降低 被 称 为 布局 颠 繁 。 尽 管 浏 览 器 已 经 为 页 面 布局 的 重 
新 计算 进行 了 高 度 优化 ,但 由 于 布局 颠 艇 ,这 些 优化 的 效果 大 打折 扣 。 例 如 ,浏览 器 可 以 轻易 地 
将 同一 时 间 的 一 系列 获取 操作 优化 成 一 个 单一 的 、 流 畅 的 操作 ,这 是 因为 浏览 器 在 第 一 次 获取 之 
后 可 以 缓存 页 面 的 状态 ， 然 后 在 后 续 每 次 获取 操作 时 ,参考 那个 状态 。 但 是 ,如 果 反 复 执 行 了 获 
取 之 后 又 执行 设置 就 会 让 浏览 器 去 做 许多 繁重 的 工作 ,因为 设置 所 做 的 更 改 会 不 断 地 使 其 缓存 
失效 。 





















































当 布 局 颠 艇 在 动画 循环 中 出 现 的 时 候 , 对 性 能 的 影响 更 是 雪上 加 霜 。 试 想 一 个 动画 循环 力求 
达到 60 帧 每 秒 ， 这 是 人 有 眼 感知 平滑 运动 的 最 低 值 。 这 意味 着 在 动画 循环 中 ， 每 一 个 tick 都 必须 在 
16.7 毫 秒 (1 秒 /60tick= 16.67 毫 秒 ) 内 完成 。 布 局 颠 艇 很 容易 导致 每 个 tick 超 过 这 个 时 限 。 最 终结 
果 当 然 就 是 动画 变 得 兢 兢 巴 巴 。( 用 网 页 动画 术语 来 讲 就 是 卡 顿 。) 









































尽管 有 些 动画 引擎 ， 例 如 Velocityjs， 在 其 动画 循环 中 为 减少 布局 颠 艇 进行 了 优化 ， 但 还 要 
当心 在 你 自己 的 循环 中 避免 出 现 布局 颠 和 能， 例如 在 setInterval() 或 自 调用 的 setTimeout() 代 码 
里 面 。 














7.2.2 ”解决 办 法 


避免 布局 颠 艇 的 方法 很 简单 ， 那 就 是 把 DOM 的 设置 和 获取 的 操作 分 别 集合 在 一 起 。 以 下 代 
码 会 导致 布局 颠 艇 ; 
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// 糟糕 的 做 法 

Var currentTop = $("element").css("top"); // 获取 
$("element").style.top = currentTop + 1; // 设置 
Var currentLeft = $("element").css("left"); // 获取 
$("element").style.left = currentLeft + 1; // 设置 





如 果 重 写 上 述 代码 , 把 查询 放 在 一 起 , 把 设置 放 在 一 起 , 那么 浏览 器 就 可 以 打包 相应 的 操作 ， 
从 而 减少 代码 造成 的 布局 颠 艇 的 影响 : 


Var currentTop = $("element").css("top"); // 获取 
var CuITTentLeft = $("element").css("left"); // 获取 
$("element").css("top",currentTop + 1); // 设置 
$("element").css("left", currentlLeft + 1); // 设置 





以 上 所 说 明 的 问题 经 常会 在 生产 代码 中 看 到 , 尤其 是 当 UI 操作 依赖 于 元 素 当 前 CSS 属 性 值 的 
时 候 [eo 


比如 你 的 目的 是 在 单 击 按 钮 的 时 候 , 切换 侧 边 菜单 的 可 见 性 。 要 想 达 到 这 一 效果 , 你 可 能 会 
先 检查 侧 边 菜单 的 display 属 性 是 设置 成 "none" 还 是 "block"， 然 后 再 相应 地 进行 值 的 替换 。 检 查 
display 属 性 的 过 程 构成 一 次 “获取 ”; 后 续 不 论 是 将 侧 边 菜单 显示 出 来 还 是 隐藏 起 来 都 构成 了 一 






















































































要 想 优化 这 种 代码 就 必须 在 内 存 中 保留 一 个 变量 , 每 当 按 钮 点 击 时 ,这 个 变量 跟着 更 新 , 然 
后 在 切换 可 见 性 之 前 ,通过 查询 这 个 变量 得 知 侧 边 菜单 的 当前 状态 。 这 样 ，“ 获 取 ” 的 过 程 就 完 
全 省 掉 了 ， 从 而 有 助 于 减少 设置 和 获取 交替 出 现 的 可 能 性 。 另 外 , 除了 降低 布局 颠 艇 发 生 的 可 能 
性 以 外 ，UI 现 在 还 得 益 于 减少 了 一 次 页 面 查 询 。 记 住 : 每 次 设置 和 获取 对 于 浏览 絮 操 作 来 说 都 比 
较 消耗 性 能 ; 设置 和 获取 次 数 越 少 ，UI 的 速度 就 会 越 快 。 
























































许 许多 多 的 小 改进 最 终 会 积累 成 相当 可 观 的 好 处 , 而 这 正 是 本 章 的 潜在 主题 : 尽 可 能 多 地 遵 
循 性 能 最 佳 实践 , 就 可 以 尽 可 能 少 地 为 了 性 能 而 妥协 自己 心中 理想 的 动 效 设计 目标 , 从 而 实现 满 
意 的 页 面 。 











7.2.3 ”jQuery 元 素 对 象 


实例 化 jQuery 元 素 对 象 ( jQuery element object，JEO ) 是 造成 DOM 获 取 操 作 的 常见 真 凶 。 你 
可 能 纳闷 什么 是 正 O， 但 是 你 肯定 见 过 下 面 这 样 的 代码 片段 : 
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$("#element").css("opacity", 1); 


或 者 等 效 的 原生 JavaScript: 


document .getElementById("element").style.opacity = 1; 








在 jQuery 代码 中 ,由 $("#element") 返 回 的 值 就 是 一 个 厄 O， 即 一 个 包装 了 所 查询 的 原生 DOM 
元 素 的 对 象 。 正 O 提 供 了 所 有 你 欢喜 的 jQuery 功能 ， 包 括 .css()、.animate() 等 。 






































在 原生 代码 中 ， 由 getElementById("element") 返 回 的 值 是 一 个 原生 的 (未 包装 的 ) DOM 元 
素 。 上 面 两 种 写法 都 要 求 浏览 器 搜索 DOM 树 ， 找 到 想 要 的 元 素 。 这 种 操作 ， 如 果 重 复 多 次 ， 就 


会 影响 页 面 的 性 能 。 











当 未 被 缓存 的 元 素 在 重复 使 用 的 代码 
恶劣 了 。 看 下 面 这 个 例子 : 





$elements.each(function(i, element) { 
$("body").append(element); 
]); 


你 可 以 看 到 $("body") 作 为 一 个 JEO 实 
的 当前 元 素 添加 到 DOM ( 这么 做 也 有 其 诉 
看 似 无 害 的 一 行 代 码 的 操作 累积 起 来 会 非 


解决 办 法 就 是 缓存 结果 ， 或 者 把 返回 
jQuery 函数 时 反复 执行 DOM 操 作 。 因 此 ， 


// 糟糕 做 法 : 未 缓存 JE0 
$("#element").css("opacity", 1); 
// 一 些 中 间 代 码 Day 

// 我 们 再 次 将 JE0 实 例 化 
$("#element").css("opacity", 0); 


在 恰当 优化 之 后 ， 变 成 下 面 这 个 样子 





片段 中 出 现 , 例如 在 循环 代码 中 , 对 性 能 的 影响 就 更 加 


例 , 反复 在 $.each() 的 每 次 循环 中 出 现 : 除了 把 循环 中 
E 能 问题 ) 以 外 ， 你 还 反复 强制 执行 了 DOM 查 询 。 这 种 
常 快 。 








的 JEO 存 到 变量 里 去 ， 这 样 就 避免 了 每 次 在 元 素 上 调用 
代码 从 原来 的 这 个 样子 : 





// 缓存 jQueTy 元 素 对 象 ， 在 变量 前 面 加 个 前 缓 $ 用 来 表示 这 是 个 ]E0 


var $element = $("#element"); 
$element.css("opacity", 1); 
A/ ee 一 些 中 间 代 码 ……: 


// 我 们 复 用 了 缓存 的 JE0， 避 免 了 一 次 DOM 查 询 


$element.css("opacity” , 0); 
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现在 可 以 在 整个 代码 里 复 用 $element， 并 日 不 再 会 因 它 造成 重复 的 DOM 查 询 了 。 








7.2.4 强制 给 值 


动画 引擎 的 传统 做 法 是 在 动画 的 一 开始 查询 一 遍 DOM 来 确定 每 个 被 设置 动画 的 CSS 属 性 的 
初始 值 是 多 少 。Velocity 通 过 一 种 称 为 “强制 给 值 ”的 功能 可 以 绕 过 这 一 页 面 查询 事件 。 这 也 是 
避免 布局 颠 艇 的 另 一 项 技术 。 通 过 强制 给 值 ， 可 以 明确 地 为 动画 设置 初始 值 ， 从 而 彻底 免 去 了 一 
开始 就 对 页 面 进行 获取 的 操作 。 









































强制 给 定 的 值 作为 第 二 项 被 传人 一 个 数组 中 , 而 这 个 数组 奉 代 了 原本 动画 属性 映射 中 属性 值 
的 位 置 。 数 组 中 的 第 一 项 是 你 想 要 设置 动画 变动 到 的 最 终 值 。 














看 看 下 面 两 个 动画 示例 ， 两 者 都 是 在 页 面 加 载 完成 之 后 就 触发 的 : 





// 设置 translateX 从 初始 值 0 变动 至 500 像 素 的 动画 
$element.velocity({ translateX: [ 500, 0 ] }); 
// 设置 opacity 从 初始 值 1 变动 至 0 的 动画 

$element .velocity({ opacity: [ 0, 1 ]); 


在 第 一 个 例子 中 ， 你 强制 给 了 translatex 一 个 初始 值 0"， 因 为 你 知道 ( 页 面 刚 刚 开始 加 载 ) 
元 素 还 待 进行 平移 。 强 制 给 定 的 值 可 以 是 已 知 的 初始 值 ， 也 可 以 是 想 要 的 初始 值 。 另 外 ， 在 第 
二 个 例子 中 ， 元 素 的 当前 opacity 值 为 1 ， 因 为 这 是 opacity 的 默认 值 ， 而 且 你 还 未 对 元 素 进行 任 
何 修改 。 简 而 言 之 ， 有 了 强制 给 值 的 功能 ， 可 以 在 已 了 解 元 素 样式 的 情况 下 减少 浏览 器 的 工作 
负担 。 






































ni 注意 ”只 在 动画 序列 第 一 次 使 用 时 ， 强 制 给 动画 属性 一 个 值 ， 而 不 是 在 后 续 动画 发 生 的 时 
候 强制 给 值 ， 因 为 Velocity 已 经 在 内 部 做 了 缓存 工作 ; 


$element 
// 在 此 处 可 以 选择 强制 给 值 
.velocity({ translateX: [ 500, 0 ] }) 
// 不 要 在 这 里 强制 给 值 ; 500 已 经 内 部 缓存 起 来 了 
.Velocity({ translateX: 1000 }); 





强制 给 值 的 功能 在 高 压 的 情况 下 能 体现 无 穷 的 价值 , 例如 在 桌面 浏览 咒 上 同时 运动 大 量 元 素 
的 时 候 ， 或 者 用 于 处 理 低 端 移动 设备 上 每 个 页 面 交 互 都 会 产生 明显 延迟 的 时 候 。 

















然而 ， 在 大 多 数 实际 UI 动画 场景 中 ,不 需要 进行 强制 给 值 的 优化 ,这 是 因为 每 当 你 在 CSS 样 
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式 表 中 修改 元 素 的 值 时 ， 都 要 更 新 一 遍 强制 给 定 的 值 ， 从 而 导致 代码 不 那么 容易 维护 。 


< 注意 请 办 考 第 8 章 ， 大概 了 解 级 制 给 值 的 应 用 。 


A 





7.3 批量 添加 DOM 





正如 减少 布局 颠 艇 一 样 ， 批 量 添 加 DOM 是 另 一 种 有 助 于 避免 与 浏览 器 发 生 多 余 交 互 的 性 能 
提升 技巧 。 


7.3.1 问题 


关于 “获取 ”和 “设置 ”的 话题 还 没 说 完 呢 ! 有 一 种 常见 的 页 面 设置 操作 是 在 页 面 运 行 时 插 
入 新 DOM 元 素 。 为 页 面 添加 新 元 素 有 很 多 用 途 ， 不 过 其 中 最 流行 的 也 许 就 是 无 限 深 动 了 ， 它 在 
用 户 向 下 滚动 的 时 候 ， 不 断 让 新 元 素 在 页 面 底部 以 动画 方式 进入 视图 。 

















在 前 一 节 中 已 经 知晓 , 每 当 有 一 个 新 元 素 添加 进来 , 浏览 器 就 必须 针对 所 有 受到 影响 的 元 素 
进行 计算 。 这 是 一 个 相对 较 慢 的 过 程 。 因 此 ， 当 每 秒 要 进行 多 次 DOM 搬 和 人 时， 页 面 的 性 能 就 会 
受到 显著 影响 。 幸 运 的 是 ， 当 处 理 多 个 元 素 时 ， 如 果 所 有 元 素 是 同时 搬入 的 , 那么 浏览 器 可 以 对 
这 个 设置 的 操作 进行 优化 。 但 不 幸 的 是 , 作为 开发 人 员 的 我 们 经 常 无 意识 地 放弃 了 这 种 优化 做 法 ， 
给 DOM 单 独 添加 元 素 。 请 看 下 面 未 优化 的 DOM 搬 人 做 法 : 


























// 糟糕 的 做 法 
var $body = $("body"); 
var $newElements = [ "<div>Div 1</div>", "<div>Div 2</div>", "<div>Div 3</div>" ]; 
$newElements.each(function(i, element) { 
$(element).appendTo($body); 
// 其 他 代码 
]); 


以 上 代码 遍历 了 一 组 元 素 字符 串 ， 这 组 元 素 字符 串 被 实例 化 到 jQuery 元 素 对 象 中 。( 这 么 做 
没有 什么 性 能 损失 ,因为 你 没有 针对 每 个 于 0 去 查询 DOM。 ) 然后 , 使 用 jQuery 的 appendTo() 函 数 
将 每 个 元 素 插入 到 页 面 中 。 





问题 是 这 样 的 : 即使 在 appendTo() 请 句 后 面 还 有 其 他 代码 , 浏览 器 也 不 会 把 这 些 DOM 设 置 操 
作 压 缩 成 一 个 单一 的 插入 操作 , 因为 浏览 器 不 能 确定 循环 以 外 的 异步 代码 操作 不 会 在 插入 操作 之 
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间 修 改 DOM 状 态 。 例 如 ， 想 象 这 样 一 个 场景 : 在 每 次 插 和 人 之 后 都 查询 DOM， 想 要 搞 清 楚 究竟 有 
多 少 元 素 在 页 面 上 存在 : 


// 粳 粒 的 做 法 
$newElements.each(function(i, element) { 
$(element).appendTo($body); 
// 输出 body 元 素 有 多 少 个 子 元 素 
console.log($body.children().size()); 
)); 





浏览 器 无 法 将 上 面 的 DOM 搬 入 优化 成 一 次 操作 ， 这 是 因为 代码 明确 要 求 浏览 顺 告诉 我 们 ， 
在 下 次 循环 开始 之 前 ,究竟 存在 多 少 元 素 。 因 为 浏览 器 每 次 都 要 返回 正确 数值 ， 因 此 它 无 法 批量 
处 理 后 面 所 有 的 插入 操作 。 











总 之 ,在 循环 内 部 进行 DOM 元 素 插入 时 ， 每 一 次 插入 的 操作 与 其 他 都 是 互相 独立 的 ， 因 此 
会 造成 明显 的 性 能 损失 。 





7.3.2 ”解决 办 法 


不 要 将 一 个 个 新 元 素 单独 插 和 DOM 中， 而 是 要 在 内 存 中 构建 一 个 完整 的 DOM 元 素 集 合 ， 然 
后 把 这 个 集合 通过 一 个 appendTo() 调 用 插入 到 页 面 中 。 本 节 前 面 举 例 的 代码 经 过 优化 后 变 成 下 面 
这 样 : 

















// 优化 后 
var $body = $("body"); 
var $newElements = [ "<div>Div 1</div>", "<div>Div 2</div>", "<div>Div 3</div>" ]; 
var html = ""; 
$newElements.each(function(i, element) { 
html += element; 
)); 
$(html).appendTo( $body); 




















以 上 代码 将 代表 每 个 HTML 元 素 的 字符 串 连 在 一 起 形成 一 个 主 字符 串 , 然后 把 这 个 主 字 符 串 
转 成 JEO 并 一 次 性 添加 到 DOM 上。 通过 这 种 做 法 , 浏览 器 得 到 明确 指示 , 将 所 有 元 素 一 次 性 插入 ， 
相应 的 性 能 也 得 到 了 优化 。 





























很 简单 ， 对 吗 ? 本 章 剩余 的 内 容 也 是 如 此 。 提 升 性 能 的 最 佳 实践 通常 都 像 这 样 简单 。 只 需要 
训练 好 自己 的 眼睛 ， 发 现 可 以 使 用 最 佳 实践 的 地 方 即 可 。 
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各 
HE 


提升 性 能 


完全 取决 于 
你 目 己 。 





7.4 技巧 : 避免 影响 临近 的 元 素 


提升 性 能 很 重要 的 一 点 就 是 要 考虑 一 个 元 素 的 动画 对 其 临近 元 素 的 影响 。 


7.4.1 问题 


设置 一 个 元 素 的 尺寸 的 动画 时 ,这 种 改变 经 常会 影响 附近 元 素 的 定位 。 例 如 ， 如 果 夹 在 两 个 
兄弟 元 素 之 间 的 一 个 元 素 宽度 缩小 , 那么 它 的 兄弟 元 素 的 绝对 定位 就 会 动态 改变 , 从 而 保持 在 动 
画 元 素 的 旁边 。 男 一 个 例子 可 能 是 设置 通信 在 父 元 素 中 的 子 元 素 的 动画 ,而 这 个 父 元 素 并 没有 明 
确定 义 的 width 和 height 属 性 。 相 应 地 ， 设 置 子 元 素 的 动画 时 ， 父 元 素 的 尺寸 也 会 改变 ， 从 而 确 
保 将 子 元 素 完 全 包 庄 在 内 。 实 际 上 , 子 元 素 并 不 是 唯一 被 设置 动画 的 元 素 ， 因 为 它 的 父 元 素 的 尺 
才 也 被 设置 了 动画 。 如 果 这 发 生 在 动画 循环 里 面 ,那么 浏览 器 在 每 次 循环 时 要 做 的 工作 就 更 多 了 ! 
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有 很 多 CSS 属 性 ,一 经 改变 ,就 会 造成 临近 元 素 尺 寸 或 位 置 的 调整 ， 其 中 包括 : top、right、 
bottom 和 和 left， 所 有 的 margin 和 padding 属 性 ，border 厚 度 ， 以 及 width 和 height 尺 寸 。 














作为 关心 性 能 的 开发 人 员 , 你 需要 了 解 设置 这 些 属性 的 动画 会 给 页 面 带 来 什么 影响 。 时 刻 问 
问 自己 , 设置 每 个 属性 的 动画 会 怎样 影响 临近 元 素 。 如 果 重 写 代 码 能 够 让 你 避免 元 素 变化 带 来 的 
互相 影响 ， 那 么 请 考虑 重 写 。 事 实 上 ， 要 这 么 做 有 一 种 简便 方法 ， 继 续 看 后 面 的 解决 办 法 ! 

















hl 





7.4.2 解决 办 法 


这 种 可 以 避免 影响 到 临近 元 素 的 解决 办 法 是 尽 可 能 设置 CSS 的 transform 属 性 〈translateX、 
translateY、scaleX、scaleY、rotatez、rotateX 和 rotateY ) 的 动画 。transform 属 性 的 特殊 之 处 
在 于 它们 将 目标 元 素 提 升 至 一 个 单独 的 层 , 这 个 层 可 以 独立 于 页 面 其 他 内 容 单 独 渲染 (通过 GPU 
加 速 提升 性 能 )， 因 此 相 邻 的 元 素 不 会 受到 影响 。 例 如 ， 在 设置 一 个 元 素 的 translatex 变 动 到 
"500px" 的 动画 时 ， 元 素 会 向 右 移动 S00 像 素 ， 履 盖 在 任何 动画 路 径 上 已 经 存在 的 元 素 的 上 面 。 如 
果 在 动画 路 径 上 没有 任何 元 素 (也 就 是 没有 相 邻 的 元 素 )， 那 么 使 用 translateX 的 效果 与 设置 更 
慢 的 left 属 性 的 动画 的 效果 ， 在 页 面 上 看 起 来 是 一 样 的 。 


























因此 ， 只 要 有 可 能 ， 如 果 原 本 动画 写成 这 样 : 


// 将 元 素 自 左 侧 移动 500 像 素 
$element.velocity({ left: "500px” }); 


就 应 该 重 构 为 以 下 代码 : 


// 更 快 : 使 用 translateX 
$element.velocity({ translateX: "500px” }); 


同 理 ， 如 果 你 可 以 用 translateY 蔡 代 top， 也 请 这 样 做 : 





$element.velocity({ top: "100px"” }); 
// 更 快 : 使 用 translateY 
$element.velocity({ translateY: "100px"” }); 





注意 ， 有 时 候 ， 你 是 有 意 使 用 left 或 top 属 性 ， 以 便 可 以 相应 改变 相 邻 元 素 的 位 置 。 但 在 所 


I 有 其 他 情况 下 ， 养 成 使 用 transform 属 性 的 习惯 。 对 效率 的 提升 作用 会 很 明显 。 
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优先 考虑 opacity 胜 于 color 
opacity 是 另 一 个 可 以 让 GPU 演 染 加 速 的 CSS 属 性 ,因为 它 不 影响 元 素 的 位 置 。 因此， 如 果 
页 面 上 的 有 些 元 素 已 经 加 了 动画 ， 比 如 ， 当 用 户 鼠 标 悬 停 在 元 素 上 时 color 属 性 会 改变 ， 那 么 
请 考虑 用 设置 opacity 的 动画 来 替代 。 如 果 最 终 效 果 跟 设置 颜色 的 动画 的 效果 差不多 优秀 ， 那 
效 阁 不 a 因为 这 样 做 可 以 提升 UI 的 性 能 ,而 不 必 受 协 视觉 效果 。 
作为 关心 性 能 的 开发 人 员 , 你 不 能 再 随意 选择 动画 属性 了 。 你 现在 必须 考虑 选择 每 个 属性 
所 带 来 的 影 


tk 注意 请 查看 CSSTrigger.com 上 的 内 容 ， 了 解 每 个 CSS 属 性 如 何 影响 浏览 器 性 能 。 
B= 
7.5 技巧 : 减少 并 发 加 载 


浏览 锅 有 瓶颈 。 找 到 究竟 在 哪儿 ， 尽 量 末 在 瓶颈 下 边 。 








7.5.1 问题 


当 页 面 首次 加 载 时 ， 浏 览 器 会 尽 可 能 快 地 处 理 HTML 、CSS 、JavaScript 和 图 片 。 因 此 不 出 意 
外 ,这 时 候 发 生 的 动画 容易 发 生 延迟 ,它们 在 努力 抢夺 训 览 吉 有 限 的 资源 。 所 以 ,尽管 在 页 面 加 
载 序列 中 添加 动画 是 显摆 动 效 设 计 技 巧 的 好 时 机 ， 但 如 果 想 避免 用 户 产 生 网 站 很 慢 的 第 一 印象 ， 
那么 克制 自己 不 要 这 么 做 。 








同 理 ， 当 许多 动画 同时 在 页 面 上 发 生 时 ,也 会 出 现 一 个 类 似 的 并 发 性 瓶 贷 ,不 论 它 是 出 现在 
页 面 生命 周期 中 的 哪个 阶段 。 在 这 些 情况 下 , 浏览 器 在 同时 处 理 众多 样式 变化 的 重 压 下 会 喘 不 过 
气 来 ， 然 后 卡 顿 就 发 生 了 。 





季 运 的 是 ， 有 一 些 聪明 的 技巧 可 以 减少 并 发 的 动画 加 载 。 


7.5.2 ”解决 办 法 
要 解决 并 发 问题 有 两 种 方法 : 错开 动画 以 及 将 动画 拆 开放 到 一 个 序列 里 。 
错开 动画 








减少 并 发 动画 加 载 的 一 个 方式 是 使 用 Velocity 的 UI pack 中 的 stagger 功 能 , 它 会 相继 在 一 组 元 
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素 的 动画 开始 前 添加 指定 的 延迟 时 间 。 例 如 ， 要 设置 一 组 元 素 中 每 个 元 素 的 opacity 值 变动 至 1 的 
动画 ， 并 且 在 动画 开始 时 间 之 间 相 继 添 加 300 毫 秘 的 延迟 ， 代 码 可 能 会 是 这 样 : 




















$elements.velocity({ opacity: 1 }, { stagger: 300 }); 




















这 时 候 , 这 些 元 素 不 再 是 完全 同步 执行 动画 的 ,而 是 在 整个 动画 序列 的 开头 ,只 有 第 一 个 元 
素 在 执行 动画 。 然后， 在 整个 序列 的 结尾 ， 只 有 最 后 一 个 元 素 执行 动画 。 你 很 高 效 地 分 散 了 动画 
序列 的 总 工作 量 , 使 浏览 器 总 是 在 每 一 刻 做 更 少 的 工作 ， 而 不 是 同时 执行 每 个 元 素 的 动画 ,让 浏 
览 器 累 得 喘 不 过 气 来 。 另 外 ， 在 动 效 设计 中 使 用 错开 动画 ， 通 常会 得 到 较 好 的 审美 效果 。( 请 参 
考 第 3 章 ， 进 一 步 了 解 错开 动画 的 好 处 。) 
































多 动画 序列 





减少 并 发 加 载 还 有 男 一 个 聪明 的 方法 : 将 多 个 属性 的 动画 拆 成 多 动画 序列 。 以 设置 元 素 的 
opacity 值 的 动画 为 例 。 这 通常 是 一 个 相对 轻松 的 操作 。 但 是 ， 如 果 同 时 还 要 设置 元 素 的 width 和 
box-shadow 属 性 的 动画 ， 那 么 就 会 给 浏览 需 带 来 更 多 可 观 的 工作 量 : 会 影响 更 多 像素 ， 也 要 进行 
更 多 计算 。 


因此 ， 如 果 原 本 动画 像 这 样子 : 












































$images.velocity({ opacity: 1, boxShadowBlur: "50px” }); 
也 许可 以 考虑 重 构成 下 面 这 样 : 


$images 
.velocity({ opacity: 1 }) 
.velocity({ boxShadowBlur: "50px” }); 

















这 样 浏览 器 就 有 更 少 的 并 发 工作 要 做 , 因为 这 些 都 是 一 个 接 一 个 发 生 的 单独 属性 动画 。 注 意 
此 处 要 进行 权衡 ， 因 为 我 们 增长 了 整个 动画 序列 的 持续 时 间 。 这 对 于 最 终 的 应 用 场景 而 言 ， 也许 
是 好 事 ， 也 许 是 坏事 。 












































既然 这 种 优化 需要 改变 你 原本 对 动 效 设计 的 想法 , 那么 这 一 技巧 并 非 总 是 要 使 用 。 把 它 作 为 
最 后 的 手段 吧 。 如 果 需 要 在 低 端 设备 上 挤 出 额外 的 性 能 ， 那 么 用 这 种 技巧 或 许 合适 。 其 他 情况 
下 ， 不 要 用 这 种 技巧 预先 优化 网 站 上 的 代码 ， 否 则 的 话 ， 最 终 得 到 的 将 是 不 必要 的 腾 肿 且 腹 涩 
的 代码 。 
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7.6 技巧 : 不 用 持续 响应 滚动 (scroll) 和 调整 大 小 〈resize) 事件 


要 注意 代码 运行 的 频率 。 如 果 一 段 很 快 的 代码 片段 在 每 秒 钟 内 运行 1000 次 ,那么 累积 起 来 ， 
它 也 不 会 很 快 了 。 


7.6.1 问题 








浏览 器 的 滚动 ( scroll ) 和 调整 大 小 (resize ) 是 两 个 触发 频率 非常 频繁 的 事件 类 型 : 每 当 
用 户 调 整 或 深 动 浏览 器 窗口 时 ,浏览 絮 都 会 在 每 秒 内 触发 多 次 与 这 些 事件 相关 的 回调 函数 。 因 此 ， 
如 果 你 注册 的 回调 函数 与 DOM 有 交互 的 话 ， 或 者 更 糟 ， 包 含 布局 颠 艇 的 话 ， 那 么 它们 会 在 滚动 
或 调整 大 小 时 带 来 巨大 的 浏览 器 负担 。 请 看 下 面 的 代码 : 






































// 当 滚 动 浏览 器 窗口 时 ， 执 行 一 个 行为 
$(window).scroll(function() { 
// 这 里 写 的 任何 行为 都 会 在 用 户 滚动 时 ， 每 秒 钟 触发 多 次 
]); 
// 当 浏 览 器 窗口 的 大 小 改变 时 ， 执 行 一 个 行为 
$(window) .resize(function() { 
// 这 里 写 的 任何 行为 都 会 在 用 户 调整 窗口 大 小 时 ， 每 秒 钟 触 发 多 次 
]); 














要 意识 到 , 以 上 函数 并 不 是 在 事件 发 生 时 只 调用 一 次 , 而 是 在 用 户 与 页 面 进行 相应 交互 的 整 
段 时 间 中 ， 持 续 调用 。 





7.6.2 ”解决 办 法 


这 个 问题 的 解决 办 法 是 对 事件 句柄 进行 反 跳 ( debounce )。 所 谓 反 跳 是 指 这 样 一 个 过 程 : 定 
义 一 个 时 间 间 隔 ， 在 此 时 间 间 隔 期 间 ， 事件 句柄 回调 将 仅 会 被 调用 一 次 。 例 如 ,假设 你 定义 了 一 
个 250 毫 秒 的 反 跳 间隔 ， 而 用 户 滚动 页 面 的 总 持续 时 间 为 1000 毫 秒 。 这 时 候 ， 进 行 了 反 跳 的 事件 
句柄 代码 就 会 相应 地 仅 触发 四 次 (1000 毫 秒 /250 毫 秒 )。 



































反 跳 实施 的 代码 已 经 超出 了 本 书 的 范围 。 幸 运 的 是 , 许多 库 专门 用 于 解决 这 个 问题 。 请 访问 
davidwalsh.name/javascript-debounce-function 查看 人 例子。 另外， 非常 流行 的 Underscorejs 
(UnderscoreJS.org )， 它 是 一 个 与 jQuery 很 相近 、 也 提供 用 于 简化 编程 的 辅助 函数 的 JavaScript 库 ， 
这 个 库 含 有 debounce 函 数 ， 你 可 以 轻松 地 在 事件 句柄 上 反复 使 用 它 。 
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MV 注意 社 在 信号 术 书 期 间 ，Chrome 的 最 新 版 本 已 经 自动 反 刺 江 动 事件 了 。 
I 
7.7 技巧: 减少 图 片 泻 染 


不 是 对 所 有 元 素 的 演 染 都 是 一 样 的 。 要 显示 有 些 元 素 , 浏览 器 要 加 班 工作 才 行 。 让 我 们 看 看 
这 些 元 素 有 哪些 。 




















7.7.1 问题 


视频 和 图 片 是 多 媒体 元 素 类 型 , 浏览 器 必须 要 加 倍 和 努力 演 染 才 行 。 要 计算 非 多 媒体 元 素 的 尺 
寸 属性 是 很 轻松 的 , 但 是 多 媒体 元 素 包 含 成 千 上 万 的 像素 数据 ， 要 改变 它们 的 大 小 、 尺 十 或 是 重 
新 合成 ， 对 浏览 器 而 言 计算 开销 是 很 大 的 。 设 置 这 些 元 素 的 动画 的 性 能 总 是 比 不 上 设置 标准 
HTMI 元 素 (如 div、p 和 table ) 的 动画 的 性 能 ， 来 得 理想 。 




















另外 , 鉴于 滚动 页 面 儿 乎 可 以 视 为 设置 整个 页 面 的 动画 ( 可 以 把 滚动 页 面 视 为 设置 页 面 的 top 
性 的 动画 )， 在 CPU 吃紧 的 移动 设备 上 ， 多 媒体 元 素 也 会 造成 滚动 性 能 的 巨 幅 下 降 。 
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7.7.2 解决 办 法 


不 幸 的 是 , 除了 尽 可 能 把 简单 的 、 基 于 图 形 的 图 片 转 成 SVG 元 素 以 外 ,就 没有 其 他 任何 办 法 
可 以 将 多 媒体 内 容重 构成 更 快 的 元 素 类 型 。 因此, 唯一 可 行 的 性 能 优化 做 法 就 是 减少 在 页 面 上 同 
时 显示 和 同时 设置 动画 的 多 媒体 元 素 总 数 。 注 意 这 里 用 到 的 同时 一 词 是 在 强调 浏览 器 泻 染 的 客观 
情况 : 浏览 需 只 泻 染 可 以 看 到 的 东西 。 页 面 上 看 不 到 的 部 分 (包括 包含 额外 图 片 的 部 分 ) 是 不 会 
被 泻 染 的 ， 而 且 也 不 会 对 浏览 需 进 程 造 成 额外 压力 。 









































因此 ， 有 两 种 最 佳 实践 可 以 遵循 : 第 一 种 ,如 果 原 本 感觉 在 页 面 上 添 不 添 额外 图 片 都 无 所 谓 
的 话 ， 那 么 选择 不 添 。 要 泻 染 的 图 片 越 少 ，UI 性 能 就 越 好 。( 更 不 用 说 更 少 的 图 片 给 页 面 网 络 加 
载 时 间 带 来 的 正面 影响 。) 














第 二 种 ， 如 果 你 的 UI 在 同时 加 载 很 多 图 片 进入 视图 ( 比如 ，8 幅 或 以 上 ， 根 据 设 备 硬件 性 能 
而 定 ), 考虑 不 要 设置 这 些 图 片 的 动画 , 或 者 只 是 简单 地 切换 每 幅 图 片 的 可 见 性 从 不 可 见 到 可 见 。 
这 种 视觉 效果 可 能 并 不 优雅 , 要 弥补 这 一 点 , 可 以 考虑 错开 切换 可 见 性 的 动画 时 间 , 使 图 片 一 个 
接 一 个 显示 而 不 是 同时 显示 出 来 ， 这 样 做 通常 会 产生 出 更 精致 的 动 效 设计 。 
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泽 更 多 关于 动画 设计 最 佳 实践 的 知识 。 


7.7.3 暗中 潜入 的 图 片 


还 没完 呢 。 本 节 还 有 新 东西 要 讲 ， 因 为 我 们 还 没 探索 完 图 片 在 页 面 上 的 呈现 形式 呢 。 最 明显 
的 性 能 杀手 是 img 元 素 ， 但 是 图 片 还 有 另外 两 种 方式 可 以 暗中 潜入 到 页 面 上 来 。 

















CSS 渐 变 〈gradient) 





渐变 实际 上 是 图 片 的 一 种 。 它 们 不 是 用 图 片 编辑 器 事先 生成 的 ， 而 是 根据 CSS 的 样式 定义 ， 
在 运行 时 生成 的 ， 例 如 在 一 个 元 素 的 background-image 属 性 上 用 了 1linear-gradient() 作 为 值 。 这 
里 的 解决 办 法 是 尽量 选择 纯色 而 非 渐变 背景 。 浏 览 器 可 以 轻松 优化 纯色 色 块 的 泻 染 , 但 是 就 像 对 
待 图 片 一 样 ， 浏 览 器 泻 染 渐变 也 格外 费力 ， 因 为 渐变 的 色彩 是 逐 像素 变化 的 。 























阴影 (shadow) 属性 














渐变 有 个 邪恶 的 双胞胎 , 那 就 是 pox-shadow 和 text-shadow 这 两 个 CSS 属 性 。 它 们 的 泻 染 跟 渐 
变 的 泻 染 大 同 小 异 ， 只 不 过 不 是 在 background-color 上 ， 而 是 在 border-color 上 罢了 。 更 糟糕 的 
是 , 它们 的 不 透明 度 还 逐渐 减少 ， 这 要 求 浏览 右 进 行 额外 的 合成 工作 ， 因 为 渐变 的 半 透 明 部 分 必 
须 依据 动画 元 素 下 面 的 元 素来 演 染 。 这 里 的 解决 办 法 跟 之 前 的 差不多 : 如 果 从 样式 表 上 移 除 这 些 
CSS 属 性 后 ，UI 的 视觉 效果 跟 之 前 差不多 优秀 ， 那 么 宽慰 一 下 自己 ,放弃 之 前 的 方案 吧 。 网 站 的 
高 性 能 会 反 过 来 回报 你 的 。 
























































这 些 建 议 只 是 建议 而 已 。 它 们 并 非 性 能 最 佳 实践 ， 因 为 你 要 为 了 提高 性 能 而 牺牲 设计 本 意 。 
只 有 当 网 站 性 能 很 糟糕 的 时 候 ， 才 考虑 使 用 这 些 没有 办 法 的 办 法 。 


























7.8 ”在 旧 浏 览 器 上 降级 动画 


你 不 能 直接 忽略 对 性 能 低下 的 浏览 器 和 设备 的 支持 。 如 果 从 一 开始 就 依照 关注 性 能 的 工作 流 
行事 ， 你 可 以 很 简单 地 为 它们 提供 降级 体验 ， 但 保持 功能 齐全 。 

















7.8.1 问题 
IE8 被 称 为 一 个 龟 速 、 过 时 的 浏览 器 ,正在 逐渐 失去 人 气 。 但 它 的 后 继 者 IE9 还 在 美国 以 外 被 





7.9 尽早 找到 你 的 性 能 门限 二 95 





广泛 使 用 。 另 外 ， 运行 着 Android 2.3.x 及 更 早 系统 的 老 安 卓 智能 手机 比 最 新 一 代 的 Android 和 iOS 
设备 要 慢 ， 但 它们 依然 被 广泛 使 用 。 网 站 的 每 十 位 用 户 中 ,估计 有 三 位 就 属于 IE9 和 老 系 统 这 两 
个 阵营 ( 主要 依赖 于 你 的 应 用 所 吸引 的 用 户 类 型 )。 相 应 地 ， 如 果 你 的 网 站 有 丰富 的 动画 和 其 他 
UI 互动 ， 那么 就 可 以 推断 对 于 三 分 之 一 的 用 户 来 说 ， 网 站 的 运行 很 糟糕 。 














7.8.2 解决 办 法 


要 解决 低 端 设备 造成 的 性 能 问题 有 两 种 方式 : 要 么 不 管 三 七 二 十 一 减少 整个 网 站 的 动画 ; 要 
么 只 针对 低 端 设备 减少 动画 。 前 者 说 到 底 是 一 种 产品 决策 , 而 后 者 则 只 是 一 种 可 以 轻松 实施 的 技 
术 决 策 ， 只 要 你 使 用 了 在 第 4 章 中 介绍 的 全 局 动画 乘 数 技术 ( 或 Velocity 中 对 应 的 mock 功 能 )。 全 
局 乘 数 技术 使 你 能 够 通过 一 个 变量 改变 整个 网 站 的 动画 时 间 。 因 此 , 这 里 的 诀窍 就 是 : 每 当 检 测 
出 用 户 正 在 使 用 性 能 较 弱 的 浏览 器 ,那么 就 将 乘 数 设置 为 0( 或 者 将 $.Velocity.mock 设 置 为 true )。 
这 样 做 就 能 让 整个 页 面 的 动画 都 在 一 个 动画 tick ( 少 于 16 毫 秒 ) 中 完成 : 


















































// 使 所 有 动画 立即 完成 
$.Velocity.mock = true; 




















这 种 技术 带 来 的 结果 就 是 将 UI 动画 针对 较 弱 的 设备 进行 了 降级 , 使 原本 的 动态 渐变 换 成 了 样 
式 的 立即 更 改 。 这么 做 的 好 处 很 明显 : 在 页 面 上 没有 了 资源 密集 型 的 动画 效果 ,UI 的 运行 会 明显 
流畅 许多 。 尽 管 这 一 技术 无 疑 是 具有 破坏 性 的 ( 因为 它 牺牲 了 你 原本 的 动 效 设计 意图 )， 但 是 实 
用 性 方面 的 提升 永远 都 值得 用 优雅 性 的 降低 来 换取 。 毕 竞 , 用 户 访问 你 的 应 用 是 为 了 完成 某 个 目 
的 ， 而 不 是 为 了 欣赏 UI 效果 多 巧妙 。 永 远 不 要 让 动画 成 为 用 户 实现 目的 的 绊脚石 。 



























































网 站 慢 速 运行 。 因 此， 如 果 你 的 网 站 能 够 反 其 道 而 行 之 并 取得 积极 效果 ,那么 这 些 用 户 可 能 会 感 
到 格外 欣喜 ， 也 将 更 有 可 能 继续 使 用 该 网 站 。 











7.9 尽早 找到 你 的 性 能 门限 


这 里 要 延续 上 一 技术 的 主题 , 值得 强调 的 是 本 章 中 的 建议 与 移动 设备 特别 相关 ,因为 很 多 移 
动 设备 相对 于 台式 电脑 而 言 要 更 慢 一 些 。 但 不 幸 的 是 ,我们 作为 开发 人 员 来 说 ,经 常 在 工作 流 中 
完全 忽视 这 一 点 :我 们 已 经 习惯 了 在 自己 那 运行 着 最 新 一 代 软 便 件 的 高 端 台 式 机 上 用 纯净 的 操作 
环境 来 创建 网 站 。 这 种 环境 与 真实 世界 中 用 户 的 环境 是 脱节 的 ,因为 他 们 通常 使 用 的 是 过 时 的 硬 
件 和 软件 ,而且 倾 向 于 在 浏览 器 中 同时 运行 多 个 标签 页 。 换 言 之 ,我 们 大 多 数 人 的 开发 环境 都 有 





























96 区 第 7 章 动画 性 能 














很 高 的 性 能 , 无 法 代表 实际 用 户 的 情况 ! 这 产生 的 副作用 就 是 你 根本 意识 不 到 自己 的 应 用 对 于 很 


可 观 的 一 部 分 用 户 来 说 是 明显 很 慢 的 。 
对 这 个 网 站 完全 失去 兴趣 了 。 





等 你 去 问 他 们 在 使 用 中 遇 到 了 什么 挫折 时 , 他 们 可 能 已 经 


关心 性 能 的 开发 人 员 会 采取 这 样 的 正确 方法 : 他 会 在 开发 初期 就 确定 性 能 门限 。 当 开发 应 用 


期 间 , 频繁 地 用 参考 设备 来 进行 测试 ， 
IE9 的 虚拟 机 。 如 果 早 早 地 确定 了 你 的 











参考 设备 可 能 包括 最 新 一 代 的 移动 设备 ， 外 加 一 个 运行 着 
应 用 在 参考 设备 上 要 达到 怎样 的 性 能 目标 ， 之 后 你 就 可 以 




















放宽 心 了 ， 因 为 你 知道 所 有 比 参考 设备 更 新 的 设备 都 能 为 用 户 提 供 更 好 的 性 能 。 





旧版 本 的 信息 。 


小 密 门 ”如果 你 是 Mac 用 户 , 请 访问 Microsoft 的 Modern.ie 网 站 ， 了 解 有 关 如 何 运 行 庶 拟 的 IE 


如 果 你 发 现 自己 坚持 想 要 的 动 效 设计 在 参考 设备 上 跑 不 起 来 ,请 遵循 前 面 介绍 的 技巧 : 为 那 
个 参考 设备 将 动画 优雅 降级 ， 然 后 选择 一 个 更 快 的 设备 ( 不 需要 降级 动画 的 设备 ) 作为 新 参考 。 








针对 每 一 个 测试 设备 , 记 住 同时 打开 多 个 应 用 和 标签 页 来 模拟 用 户 的 操作 环境 。 永远 不 要 在 











请 记 住 ， 远 程 浏览 器 测试 (例如 B 





真空 中 仅 打开 你 自己 的 一 个 应 用 来 测试 。 


rowserStack.com 和 SauceLabs.com 所 提供 的 服务 ) 与 真正 的 


参考 设备 测试 是 不 一 样 的 。 远程 测试 服务 适合 测试 程序 错误 和 UI 的 响应 性 ,而 不 适合 测试 动画 效 
果 。 毕竟, 测试 设备 是 在 云端 运行 , 并 没有 使 用 真正 的 硬件 , 它们 只 是 模仿 设备 的 不 同 版 本 罢了 。 











此 , 它们 的 性 能 与 真正 对 应 的 设备 司 


























E 能 通常 是 不 同 的 。 另外， 在 虚拟 机 上 发 生 与 在 浏览 絮 窗 口 





中 显示 出 来 ， 这 之 间 有 明显 延迟 ， 因 此 你 根本 无 法 真正 衡量 UI 动画 的 表现 。 








简 而 言 之 , 为 了 性 能 测试 ,就 真得 跑 出 去 买 些 真实 设备 回来 。 即 使 你 口袋 吃紧 ， 也 不 能 在 这 

















上 面 省 钱 。 为 了 测试 设备 花 的 这 几 百 美元 会 在 今后 用 更 多 的 经 常 性 收入 补 回来 , 因为 感到 高 兴 的 


用 户 会 更 频繁 地 与 你 那 顺 滑 的 应 用 进行 互动 。 








如 果 最 终 需要 好 几 个 参考 设备 ， 也 可 以 考虑 购买 Device Lab 文 架 ， 这 个 多 功能 支架 能 够 支撑 


所 有 的 移动 设备 ,让 它们 在 一 个 平面 上 显示 , 这样 就 可 以 轻松 地 在 测试 期 间 浏 览 这 些 




















屏幕 了 。 作 
不 


为 福利 ,这 个 支架 还 有 个 漂亮 的 移动 应 用 , 它 可 以 让 你 同时 控制 所 有 设备 上 的 浏览 嚣 ， 这 样 就 不 





用 手动 刷新 每 个 浏览 器 的 标签 页 了 。 


tk 注意 ”请 访问 Vanamco.com 购 买 和 下 载 Device Lab。 


A 
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尽早 确定 你 


的 性 能 门限 。 





购买 最 流行 的 Android 和 iOS 设 备 主要 发 布 周期 的 每 一 个 产品 , 这 会 让 你 覆盖 用 户 所 拥有 的 
各 级 别 硬件 和 软件 环境 。 以 下 是 我 推荐 的 测试 装备 (截至 2015 年 初 )。 
口 运行 iOS 7 的 iPhone 4 或 iPad 2 
行 最 新 iOS 版 本 的 iPhone 5s 或 更 新 产品 
行 Android 2.3.x 的 Motorola Droid X 


口 运行 Android 4.1.x 的 Samsung Galaxy SII 

口 运行 最 新 Android 版 本 的 Samsung Galaxy S5 或 更 新 产品 
也 可 以 将 上 述 Android 设 备 蔡 换 为 任何 相似 性 能 的 设备 。 这 里 的 重点 是 你 必须 要 使 用 涵盖 

每 个 重要 Android 发 布 周 期 的 设备 ( 2.3.x、4.1.x 等 )， 这 样 每 个 设备 上 的 网 络 浏览 器 性 能 才 具 有 

代表 性 。 请 参考 http://developer.android.com/about/dashboards ， 了 解 更 多 最 流行 的 Android 版 本 

的 分 布 。 


口 运 
口 运 
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7.10 “小 结 
性 能 影响 一 切 。 从 多 少 设备 可 以 运行 你 的 应 用 ,到 用 户 体 验 的 质量 ， 再 到 应 用 技术 实力 的 感 


性 认识 ， 性 能 是 专业 网 络 设计 的 一 个 重要 宗旨 。 它 不 仅仅 是 “有 了 更 好 ”， 而 是 根本 的 基石 。 不 
要 把 性 能 看 扁 了 ， 而 认为 它 只 是 事后 进行 的 简单 优化 。 


















































是 时 候 措 起 袖子 大 干 一 场 了 ! 最 后 一 章 将 带 你 实现 一 个 由 
Velocity 实现 的 完整 动画 演示 。 在 阅读 演示 代码 期 间 ， 你 会 学 到 如 
何 综合 运用 Velocity 的 核心 功能 , 大 幅 优 化 UI 动 画 的 工作 流 。 这 一 
演示 也 会 为 你 介绍 操作 CSS 中 transform 属性 的 高 级 技巧 ， 这 对 当 
今 以 网 页 为 基础 的 动画 而 言 至 关 重 要 。 


简 而 言 之 ， 你 马上 就 要 使 用 在 本 书 中 积累 的 技能 去 做 一 些 酷 
炫 的 事情 了 。 在 写 演示 代码 期 间 ， 有 两 个 目标 : 一 是 使 用 简洁 、 
表意 的 动画 代码 ， 二 是 确保 最 佳 性 能 。 











8.1 行为 
演示 中 包含 250 个 从 屏幕 球 进 球 出 、 球 来 际 去 的 圆 形 。 过 一 段 时 间 ， 画 面 会 放大 ， 虚 拟 镜头 
推进 ， 然 后 虚拟 镜头 后 撤 至 最 初 的 位 置 。 最 初 显示 的 画面 会 短暂 显示 放大 的 效果 。 

















tk 注意 在 继续 读 下 去 之 前 ， 请 前 往 VelocityJS.org/demo.book.html 预 览 演 示 。( 可 以 在 页 面 上 
Ee 任意 位 置 单 击 息 标 右键 ， 然 后 选择 “查看 源 代 码 ” 来 查看 演示 的 代码 。) 


圆 形 元 素 只 是 普通 的 div， 在 CSS 中 对 这 些 div 的 box-shadow 和 border-Tradius 进 行 了 设置 。 此 
处 没有 用 到 WebGL 或 Canvas 动 画 ， 只 是 单纯 的 HTML 元 素 操 作 。( 鉴于 同时 设置 动画 的 元 素数 量 
很 大 ， 这 个 演示 能 够 在 DOM 中 运行 得 如 此 流畅 是 很 让 人 印象 深刻 的 。) 
































让 我 们 将 这 个 动画 拆 解 开 看 : 它 包 含 了 一 些 沿 着 和 7 和 2Z 轴 平移 的 div 元 素 。Z 轴 确定 了 每 个 
元 素 动 画 的 深度 ; 而 X 和 7Y 轴 则 提供 了 在 屏幕 上 看 到 的 平滑 的 二 维 运动 。 与 元 素 的 各 个 运动 同时 
发 生 的 还 有 更 宏观 的 一 个 视角 转变 ， 它 发 生 在 含有 所 有 这 些 div 的 容器 元 素 上 。 这 一 视角 转变 
每 3 秒 发 生 一 次 ， 从 而 营造 了 周期 性 的 缩放 效果 ， 使 观看 者 感觉 好 像 正 在 圆 形 所 处 的 三 维 空间 中 




















第 二 个 画面 描绘 的 是 缩小 后 的 3D 屏 幕 ， 与 最 初 画面 放大 后 的 效果 形成 对 比 。 


如 何 下 载 示例 代码 

动画 演示 的 代码 可 以 从 peachpit.com 下 载 得 和 到。 以 下 是 获取 方式 。 

(1) 前 往 www.peachpit.com/register 创 建 或 登录 账号 。 

(2) 输入 图 书 的 ISBN 号 (978-0-13-409670-4 )， 然 后 单 击 Submit ( 提交 )。 

(3) My Registered Products ( 我 的 注册 产品 ) 页 面 打 开 。 在 列表 中 找到 此 书 , 然后 单 击 Access 
Bonus Content ( 获取 奖励 内 容 )。 

(4) 包含 下 载 链接 的 页 面 打开 ,请 单 击 获取 名 为 WebAnimationJS DemoCodeSample.zip 的 动 
画 演 示 文 件 。 
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8.2 代码 结构 
让 我 们 看 一 下 实现 该 演示 的 代码 。 它 的 结构 如 下 。 


(1) 动画 设置 : 用 于 约束 动画 移动 的 参数 规范 。 

(2) 圆 形 创建 : 生成 要 设置 动画 的 div 元 素 。 

(3) 容器 动画 : 负责 设置 圆 形 的 父 元 素 的 动画 的 代码 。 
(4) 圆 形 动画 : 负责 设置 圆 形 元 素 本 身 的 动画 的 代码 。 











负 
负 








尝试 熟悉 该 演示 实施 的 宏观 结构 , 这 样 在 接 下 来 几 节 中 探究 每 个 单独 的 代码 段 时 , 你 的 心中 
就 有 了 全 局 的 概念 : 


/六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 
动画 设置 

六 米 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 / 

/* 在 两 个 数 之 间 随 机 生成 一 个 整数 。 */ 

function r (min, max) { 

return Math.floor(Math.random() * (max - min + 1)) + min; 

} 

/* 查询 窗口 的 尺寸 。 */ 

var screenWidth = window.screen.availWidth, 





screenHeight = window.screen.availHeight; 
/* 定义 Z 轴 动画 范围 。 */ 
var translateZMin = -725， 

translateZzMax = 600; 


/六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 冰冰 六 六 六 闪 


圆 形 创建 


六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 / 





var circleCount = 250， 


circlesHtml = 


$circles = 
for (var i = 0; i < circleCount; i++) { 





circlesHtml += "<div class="'circle'></div>"; 


} 
$circle = $(circlesHtm]); 


/六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 


容器 动画 
六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 / 


$container 
.Css("perspective-origin", screenWidth/2 + "px " + screenHeight/2 + "px") 
.velocity( 
‘ 


perspective: [ 215, 50 ]， 
opacity: [ 0.90, 0.55 ] 


}, { 
duration: 800， 
loop: 1， 
delay: 3000 
]); 


/六 六 六 六 六 六 六 六 六 六 六 六 六 六 冰冰 六 六 六 六 冰冰 冰冰 六 六 六 
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圆 形 动画 
束 汶 下 业 来 理 人 来 束 汪 来 吾 本 水 遇 素 末 琅 水 素 开 仙 来 尝 环 涉 呈 天 
$circles 
.appendTo($container) 
.velocity({ 
opacity: [ 
function() { return Math.random() }, 
function() { return Math.random() + 0.1 } 
]， 
translateX: [ 
function() { return "+=" + r(-screenWidth/2.5, screenWidth/2.5) }, 
function() { return r(0, screenWidth) } 
]， 
translateY: [ 
function() { return "+=" + r(-screenHeight/2.75, screenHeight/2.75) }, 
function() { return r(0, screenHeight) } 
]， 
translateZ: [ 
function() { return "+=" + IT(translateZMin，translateZMax) }, 
function() { return r(translateZzMin, translateZzMax) } 
] 
}, { duration: 6000 }) 





velocity("reverse", { easing: "easeOutQuad" }) 
velocity({ opacity: 0 }, 2000); 


8.3 代码 段 : 动画 设置 
为 了 参考 方便 ,将 这 一 部 分 的 代码 复制 如 下 : 


/六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 闪 
动画 设置 

六 闵 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 / 

/* 在 两 个 数 之 间 随 机 生成 一 个 整数 。 */ 

function r (min, max) { 

return Math.floor(Math.random() * (max - min + 1)) + min; 

} 

/* 查询 窗口 的 尺寸 。*/ 

var screenWidth = window.screen.availWidth, 





screenHeight = window.screen.availHeight; 
/* 定义 2 轴 动 画 范围 。 */ 
var translateZMin = -725， 

translateZMax = 600; 
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第 一 部 分 “动画 设置 ”在 一 开始 定义 了 一 个 函数 f ("random" 的 缩写 )， 使 用 该 函数 可 以 人 工 
限制 随机 生成 的 整数 值 的 范围 。 该 函数 接受 min 和 max 两 个 参数 ， 然 后 会 输出 一 个 在 min 到 max 之 间 
的 随机 整数 。( 这 里 使 用 了 一 些 基 本 代数 知识 。) 当 你 在 后 面 两 个 代码 段 中 预 设 的 范围 内 随机 设 定 
动画 元 素 CSS 的 transform 值 时 ， 会 用 到 这 个 整数 。 




















接 下 来 的 代码 查询 了 window 对 象 ， 获 取 了 显示 器 的 尺寸 。 通 过 稍 后 参考 这 些 值 ， 可 以 确保 圆 
形 的 动画 不 会 远 到 屏幕 之 外 ( 并 因此 而 看 不 到 )。 


























动画 设置 的 结果 是 定义 了 元 素 在 Z 轴 上 移动 的 min ( 最 小 值 ) 和 max (最 大 值 ) 这些 值 控制 了 
你 想 要 设置 元 素 的 动画 从 初始 大 小 变动 到 多 小 ( 多 么 远离 ) 或 多 大 ( 多么 靠近 )。 确 切 地 说 ， 这 
段 代 码 规定 圆 形 沿 着 Z 轴 可 以 最 远 远离 虚拟 镜头 〈 或 说 远离 屏幕 ) 725 像 素 ， 最 近 不 得 超过 600 像 
素 。 在 这 个 案例 中 并 没有 限制 圆 形 元 素 不 得 离开 屏幕 ,但 是 圆 形 可 能 离 得 太 远 以 至 于 看 不 到 ; 或 
者 离 得 太 近 以 至 于 占据 整个 屏幕 。 从 根本 上 说 ， 这 里 由 你 自己 的 创意 决定 。 



































8.4 代码 段 : 圆 形 创建 


天 下 下 再 洒 本 来 束 米 求 来 来 玉米 来 玉 六 玉米 宁 玉 本 来 
圆 形 创建 
六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 站 六 六 六 六 冰冰 / 
var circleCount = 250， 
circlesHtml = ""， 
$circles = ""; 
for (var i = 0; i < circleCount; i++) { 





circlesHtml += "<div class="'circle'></div>",; 


} 
$circle = $(circlesHtm]); 


这 是 演示 的 第 二 部 分 代码 : 圆 形 创建 。 它 生成 了 要 设置 动画 的 基本 div 元 素 。 在 这 里 ， 首 先 
将 理想 的 圆 形 数量 定义 为 cirfcleCount。 然 后 ， 定 义 了 circlesHtm1 字 符 串 ， 用 于 容纳 拼接 之 后 的 
圆 形 的 HTML 代 码 。 











然后 ， 代 码 从 0 循环 至 circleCount 的 数字 ， 生 成 圆 形 的 HTML 人 代码。 注意 ， 这 里 使 用 了 第 7 
章 中 介绍 过 的 批量 添加 DOM 的 性 能 最 佳 实践 。 它 将 每 个 div 元 素 的 HTML 代码 拼接 成 一 个 主 
circlesHTML 字 符 串 ， 然 后 用 一 次 操作 将 其 插入 到 DOM 中 去 。( 如 果 一 次 只 往 DOM 里 添加 一 个 元 
素 , 那么 对 性 能 产生 的 负面 影响 是 很 显著 的 : 浏览 器 中 的 UI 互 动 会 僵 住 , 直至 相对 较 慢 的 元 素 插 
人 过 程 完 成 。) 
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最 后 ， 代 码 将 圆 形 元 素 包 在 一 个 jQuery 元 素 对 象 里 面 ， 这 样 它们 就 可 以 作为 一 组 元 素 在 后 续 
的 圆 形 动画 代码 部 分 轻松 操作 了 。 


8.5 代码 段 : 容器 动画 


shh hh th eb he 
容器 动画 
漳 尝 于 汕 守 六 兴 当天 兴 当 玉 雪 汪 半 届 雪 于 当 兴 下 六 学 玉 雪 玉 于 下 江 
$container 
.Css("perspective-origin", screenWidth/2 + "px ”+ screenHeight/2 + "px") 
.velocity( 
{ 
perspective: [ 215, 50 ]， 
opacity: [ 0.90, 0.55 ] 
}, 1{ 
duration: 800， 
loop: 1， 
delay: 3000 


}); 


8.5.1 三 维 CSS 入 门 


让 我 们 看 看 代码 库 中 两 段 有 关 动 画 的 代码 中 的 第 一 段 , 这 部 分 关注 的 是 包含 圆 形 元 素 的 父 级 
元 素 。 在 我 们 深入 研究 代码 之 前 ， 先 学 习 一 下 有 关 浏 览 右 中 三 维 动画 的 入 门 知 识 。 








为 了 使 transform 在 三 维 上 发 挥 作用 (例如 : translateZz、rotateX、rotateY )， 必 须 在 CSS 中 ， 
为 父 级 元 素 添 加 perspective 属 性 。 在 此 例 中 ，$container 元 素 正 是 派 这 个 用 场 。 





为 perspective 设 置 的 值 越 大 ，2Z 轴 平移 (通过 CSS 的 translatez 设 置 ) 看 起 来 相对 于 其 原点 
移动 的 距离 就 越 短 。 换 言 之 ， 如 果 想 要 在 三 维 动画 中 强调 深度 ， 就 将 父 元 素 的 perspective 属 性 
设置 为 较 小 的 数 ， 比 如 50px， 这 实际 上 也 是 演示 中 为 容器 元 素 设 置 的 值 。 相 比 之 下 ， 如 果 将 
perspective 设 为 一 个 较 大 的 值 ， 例 如 250px， 那 么 元 素 的 translatez 每 增加 一 个 像素 所 产生 的 相 
对 于 原点 的 可 见 性 移动 就 会 变 小 。 



































另 一 个 单独 的 补充 性 CSS 属 性 就 是 prospective-origin， 它 定义 了 虚拟 镜头 放置 的 角度 。 虚 
拟 镜 头 是 一 个 窥视 孔 ， 观 看 者 通过 它 观 看 浏览 器 中 的 三 维 动画 。 这 一 部 分 代码 使 用 了 jQuery 的 
$.css() 隐 数 在 容器 元 素 上 设置 perspective-origin 值 , 使 虚拟 镜头 放 在 了 页 面 的 正中 央 ， 从 而 营 
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造 了 一 种 垂直 于 三 维 动画 的 视角 。 这 个 视角 使 用 户 看 上 去 感觉 圆 形 在 正 对 着 他 的 方向 上 飞 近 或 
飞 远 。 





具体 来 说 ， 该 代码 段 将 perspective-origin 在 页 面 上 设置 在 浏览 器 宽度 和 高 度 一 半 的 位 置 ， 
即 页 面 的 中 心 点 。 这 里 用 到 了 “动画 设置 ”代码 段 中 查询 到 的 window 尺 寸 。 








了 解 了 这 些 背景 知识 后 ， 让 我 们 来 研究 一 下 这 段 代 码 。 


8.5.2 属性 
这 一 部 分 代码 创造 了 演示 中 放大 或 缩小 的 效果 。 为 了 参考 方便 ， 重 新 复制 在 下 面 : 


$container 
.Css("perspective-origin", screenWidth/2 + "px " + screenHeight/2 + "px") 
.velocity( 
{ 
perspective: [ 215, 50 ]， 
opacity: [ 0.90, 0.55 ] 
}, { 
duration: 800， 
loop: 1， 
delay: 3250 
]); 


J 


元 素 上 的 prospective-origin 属 性 一 设置 完成 ,就 用 Velocity 来 设置 其 prospective 属 性 的 
动画 。 这 么 做 很 有 必要 , 因为 想 要 得 到 的 演示 效果 并 不 是 在 静止 场景 中 保持 优势 位 置 ( 垂直 视角 )， 
而 是 要 先 扩大 后 缩小 元 素 与 虚拟 镜头 的 距离 ， 这 时 候 就 是 perspective 属 性 发 挥 作用 的 时 候 了 。 




































































具体 来 说 ， 这 部 分 代码 用 Velocity 将 元 素 的 perspective 属 性 从 初始 值 S0px 变 动 至 最 终 值 
213px。 














通过 传人 一 个 数组 作为 动画 属性 的 值 ， 可 以 强制 指定 设置 属性 toward 的 动画 的 最 终 值 (上 面 
的 例子 中 是 215px )， 还 可 以 指定 设置 属性 from 的 动画 的 初始 值 (上 面 的 例子 中 是 50px )。 尽 管 完 


全 可 以 只 传人 一 个 整数 作为 属性 值 ， 而 且 一 般 Velocity 都 是 这 么 用 的 ， 但 是 “强制 给 值 ”的 写法 
能 够 使 你 更 好 地 控制 属性 的 完整 动画 路 径 。 



























































你 可 能 有 疑问 , 难 倒 “ 强 制 给 值 ” 不 是 多 此 一 举 吗 ?毕竟 Velocity 知 道 如 何 自动 获取 CSS 属 性 
的 初始 值 。 尽 管 在 只 传人 一 个 值 而 不 是 一 个 数组 时 ，Velocity 默 认 会 获取 初始 值 ， 但 这 并 不 总 是 
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已 








图 想 的 操作 行为 ， 因 为 向 [DOM 查询 属性 的 初始 值 具有 潜在 的 性 能 问题 。 强 制 给 值 的 写法 允许 你 
明确 传人 一 个 已 知 的 初始 值 ， 从 而 避免 Velocity 去 查询 DOM。 换 言 之 , 在 perspective 属 性 中 设置 
的 初始 值 50px 与 你 一 开始 在 样式 表 中 为 容器 元 素 设置 的 perspective 值 一 致 。 你 只 是 在 此 重复 了 
一 下 这 个 值 而 已 。 注 意 ， 在 元 素 的 opacity 属 性 上 也 使 用 了 强制 给 值 的 技巧 : opacity 是 从 初始 值 
0.55 变 动 至 最 终 值 0.90， 而 0.55 正 是 在 CSS 中 设置 的 opacity 属 性 值 。 










































































正如 在 第 7 章 中 充分 讨论 过 的 ，DOM 查 询 是 动画 性 能 的 致命 弱点 ， 因 为 浏览 器 要 进行 资源 密 
集 型 运算 来 确定 元 素 的 视觉 状态 。 尽 管 在 这 个 演示 中 ，Velocity 动 画 不 是 在 一 个 循环 中 被 反复 触 
发 的 , 因此 添 不 添加 这 种 性 能 优化 并 不 重要 , 但 在 这 里 还 是 把 它 加 了 进来 , 用 于 与 强制 给 值 的 第 
二 种 应 用 作对 比 。 本 章 后 面 的 部 分 将 会 介绍 强制 给 值 的 第 二 个 用 途 。 









































设置 perspective 和 opacity 的 动画 的 最 终 效果 是 容器 的 所 有 圆 形 元 素 看 起 来 都 在 向 虚拟 镜头 
的 方向 拉 近 ， 同 时 执行 亮度 增加 的 动画 (opacity 从 0.55 变 动 至 0.90 )。 不 透明 度 的 增加 模拟 了 真 
实 世 界 中 光 的 行为 方式 : 观看 者 离 发 光 体 越 近 ， 发 光 体 看 上 去 就 越 亮 。 








8.5.3 选项 














容 需 动画 代码 的 最 后 一 部 分 是 传人 Velocity 的 选项 : duration， 这 个 不 用 再 解释 了 ; delay， 
它 在 动画 开始 之 前 插入 一 个 暂停 时 间 ; loop, 它 在 属性 映射 中 定义 的 值 与 动画 开始 之 前 元 素 的 值 
之 间 来 回 循环 动画 。 具 体 来 说 ， 通 过 将 loop 设 置 为 2， 就 是 在 告诉 Velocity 要 变动 至 属性 映射 中 设 
置 的 值 ， 然 后 变动 回 之 前 的 初始 值 ， 然 后 在 3000 上 毫秒 的 延迟 之 后 再 重复 整个 循环 迷 代 一 次 。 





















































aa 注意 当 delay 与 1oop 同 时 设置 时 ， 延 迟 会 发 生 在 每 次 循环 之 间 。 使 用 延迟 可 以 创造 一 种 愉 
A 悦 的 暂停 感受 ， 使 缩放 效果 看 上 去 不 是 突 元 地 来 回 切换 。 
8.6 代码 段 : 圆 形 动画 


在 这 里 ,事情 变 得 有 趣 起 来 了 。 让 我 们 看 一 下 圆 形 动画 , 在 这 里 要 同时 分 别 设 置 它们 在 X 了 
和 2Z 轴 上 平移 的 动画 。 你 还 将 设置 其 opacity 值 的 动画 。 











/六 六 六 六 六 六 六 闵 冰 六 六 六 六 闵 冰 闵 冰 闵 六 闵 六 闵 冰 六 六 六 六 


圆 形 动画 


六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 / 





$circles 





.appendTo($container) 
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.Velocity({ 

opacity: [ 
function() { return Math.random() }, 
function() { return Math.random() + 0.1 } 
有， 
translateX: [ 
function() { return "+=" + I(-screenWidth/2 
function() { return r(0, screenWidth) } 
], 


translateY: [ 


function() { return r(0, screenHeight) } 
], 
translateZ: [ 
function() { return "+=" + IT(translateZMin， 











] 
}, { duration: 6000 }) 
.velocity("reverse", { easing: "easeOutQuad" }) 
.velocity({ opacity: 0 }, 2000); 








8.6.1 ” 值 函 数 
与 上 一 个 代码 段 中 用 到 的 静态 动画 





再 

















.5, ScreenWidth/2.5) }, 


function() { return "+=" + r(-screenHeight/2.75, screenHeight/2.75) }, 


translateZMax) }, 


function() { return r(translateZzMin, translateZzMax) } 





要 了 解 一 下 值 函 数 ， 这 也 是 Velocity 的 一 个 独特 功能 。 


EC 注意 ”请 访问 VelocityJS.org/#tvalueFunctions 了 解 更 多 有 关 值 函数 的 内 容 。 


I 





值 函数 使 你 可 以 将 函数 传人 为 动画 属性 值 。 这 些 函 数 在 运行 








性 值 (例如 [ 215，50 ] ) 不 同 ， 此 代码 段 将 函数 用 于 
属性 值 : 会 强制 赋予 每 个 属性 一 个 数组 ,数组 的 初始 值 和 最 终 值 是 由 函数 动态 生成 的 。 让 我 们 简 


时 触发 , 并 为 集合 中 设置 了 动画 


的 每 个 元 素 分 别 调用 。 在 演示 中 ， 所 讨论 的 集合 就 是 $circles 这 个 jQuery 元 素 对 象 里 所 包含 的 圆 
都 会 分 别 设置 为 随机 值 。 另 外 还 有 唯一 的 





形 div。 最 终 ， 当 动画 开始 时 ， 每 个 圆 形 元 素 的 属 公 





















































种 方法 可 以 使 一 个 集合 中 每 个 元 素 的 动画 属性 都 有 所 不 同 , 那 就 是 通过 循环 分 别 设置 每 个 元 素 的 












































动画 , 但 这 种 方法 的 代码 乱七八糟 ,效果 也 很 糟糕 。 这 就 体现 了 值 函 数 的 优越 性 ,使 用 值 函 数 能 


够 保持 动画 代码 简洁 、 易 维护 。 





请 注意 ,为 了 生成 随机 值 ， 本 部 分 代码 利用 了 在 “动画 设置 ”代码 段 中 定义 的 辅 


























助 函 数 T。 


(提醒 一 下 ，T 函 数 返 回 的 是 min 和 max 人 参数 之 间 的 随机 整数 。) 你 马上 就 会 学 习 到 有 关 这 个 函数 的 


更 多 内 容 。 
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8.6.2 不 透明 度 动画 


不 透明 度 属性 从 一 个 随机 值 变 动 到 男 一 个 随机 值 。 在 初始 值 这 里 ， 给 随机 值 加 上 了 0.1 以 确 
保 元 素 不 会 透明 得 太 厉害 以 至 于 看 不 出 来 了 , 因为 毕 竞 你 想 让 人 看 到 你 做 的 是 什么 元 素 的 动画 效 
果 ! opacity 的 变动 导致 分 散在 页 面 上 的 圆 形 从 动画 的 第 一 帧 开始 就 具有 不 同 的 不 透明 度 。 各 不 
相同 的 不 透明 度 营 造 了 一 种 优美 的 渐变 效果 ， 为 演示 增添 了 丰富 的 视觉 感受 。 























这 段 代 码 使 用 强制 给 值 技巧 实现 了 性 能 优化 以 外 的 另 一 目的 : 即 强制 给 插入 DOM 的 元 素 属 
性 赋予 了 值 函 数 ， 从 而 可 以 动态 生成 初始 值 。 这 意味 着 你 成 功 避 免 了 编写 一 段 全 新 的 代码 ， 只 为 
了 给 圆 形 元 素 设置 CSS 初 始 状 态 。 你 在 负责 设置 独特 初始 位 置 的 动画 的 同一 行 代 码 中 动态 地 提供 
了 这 些 位 置 。 正 如 在 第 4 章 中 充分 讨论 过 的 ， 应 该 努力 让 所 有 代码 都 像 这 样 表达 明确 的 意义 。 























8.6.3 平移 动画 
为 了 参考 方便 ， 此 处 重复 一 下 这 部 分 代码 : 
/六 六 六 六 六 六 六 闵 冰 六 六 六 六 六 六 六 冰冰 六 冰冰 闵 冰 六 六 六 站 


圆 形 动画 
六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 六 / 





$circles 
.appendTo($container) 
.velocity({ 
opacity: [ 


Ee: 


function() { return Math.random() }, 


function() { return Math.random() + 0.1 } 


二 


function() { return "+=" + r(-screenWidth/2.5, screenWidth/2.5) }, 
function() { return r(0, screenWidth) } 


function() { return "+=" + r(-screenHeight/2.75, screenHeight/2.75) }, 
function() { return r(0, screenHeight) } 


translateZ: [ 





function() { return "+=" + IT(translateZMin，translateZMax) }， 











function() { return r(translateZzMin, translatezMax) } 


}, { duration: 6000 }) 
.velocity("reverse", { easing: "easeOutQuad" }) 
.velocity({ opacity: 0 }, 2000); 
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是 时 候 该 仔细 查看 一 下 translate 动 画 了 ， 它 在 演示 的 三 维 空间 中 分 别 平移 了 圆 形 元 素 的 位 
置 。 在 所 有 三 个 轴 的 方向 上 ,都 是 从 一 个 随机 初始 值 移动 到 一 个 随机 最 终 值 。 这 里 的 运算 符 包含 
一 个 加 号 后 面 跟 一 个 等 号 (+= )， 它 告诉 动画 引擎 从 初始 值 给 动画 属性 增加 一 个 单位 。 换 言 之 ， 
+= 值 运算 符 指示 动画 引擎 将 最 终 值 视 为 一 个 相对 值 。 相 比 之 下 , 动画 引擎 的 默认 行为 是 从 绝对 意 
义 上 解释 最 终 值 。 























就 像 opacity 属 性 一 样 ， 这 段 代码 也 利用 了 强制 给 值 和 值 函 数 ， 使 代码 不 仅 表 意 明 确 而 且 性 
能 优越 。 尤 其 值得 一 提 的 是 ， 圆 形 的 移动 在 XflY 轴 上 被 限制 在 与 屏幕 尺寸 相关 的 范围 内 ， 在 Z 轴 
上 ， 被 限制 在 与 最 浅 深度 和 最 次 深度 相关 的 范围 内 。( 提醒 一 下 ， 最 浅 深度 和 最 深 深度 是 在 “ 动 
画 设置 ” 那 段 代码 中 设置 的 。) 在 X 和 ll7 轴 上 用 到 一 个 随意 的 容 差 系数 ( 请 注意 除数 2.75 ) 来 减少 
元 素 执行 动画 的 分 散 度 。 这 个 值 是 个 创意 决策 ， 可 以 根据 自己 的 审美 偏好 进行 更 改 。 






























































在 代码 最 后 ， 选 项 对 象 为 整个 动画 设置 了 6000 上 毫秒 的 持续 时 间 。 


8.6.4 ” 反 转 命令 


在 主 Velocity 动 画 调用 之 后 ， 链 式 操作 继续 调用 了 Velocity 的 反 转 命令 。 反 转 并 不 完全 像 你 想 
象 的 那样 : 会 设置 目标 元 素 回 到 上 一 个 Velocity 调用 发 生 之 前 的 初始 值 的 动画 。 在 这 个 特殊 案例 
中 ， 由 于 初始 值 是 在 上 一 个 Velocity 调用 中 强制 给 定 的 ， 因 此 那些 初始 值 才 是 反 转 命令 将 要 设置 
动画 回 到 的 初始 值 。 















































我 选择 在 演示 中 包含 反 转 命令 的 一 个 原因 是 要 通过 一 行 易于 维护 的 表意 代码 延长 整个 动画 
的 持续 时 间 。( 尽管 你 会 质疑 ， 将 动画 的 持续 时 间 从 6000 毫 秒 延 长 至 12 000 毫 秒 ， 这 会 减 慢 圆 形 
移动 的 速度 。) 使 用 反 转 命令 的 方便 之 处 在 于 它 避 免 了 重新 设置 ( 即 手工 输入 ) 所 有 动画 的 初始 
值 。 重新 手工 设置 初始 值 其 实 是 个 庞大 、 繁 杂 的 工程 ,因为 你 首先 要 把 所 有 随机 生成 的 初始 值 都 
存 到 内 存 中 ,然后 才能 再 设置 变动 至 这 些 值 的 动画 。 因 此 ， 反 转 是 Velocity 的 男 一 个 很 棒 的 功能 ， 
使 演示 用 区 区 几 行 代码 就 可 以 完成 很 多 工作 。 



























































Velocity 的 反 转 命令 默认 采用 在 上 一 个 Velocity 调用 中 使 用 的 选项 对 象 ， 包 括 duration 和 
easing 等 。 在 这 种 情况 下 ， 由 于 上 一 个 Velocity 调用 中 使 用 的 持续 时 间 设 置 为 6000ms ， 因 此 反 转 
调用 也 将 使 用 相同 的 设置 。 反 转 命令 还 允许 你 指定 一 个 新 的 选项 对 和 象 以 扩展 到 上 一 个 调用 上 。 此 
、 演示 使 用 了 一 种 新 的 缓 动 类 型 ease0utQuad， 在 动画 的 反 转 方向 上 增添 了 新 的 动 效 设 计 能 力 。 


小 窍门 ”要 预览 各 种 流行 缓 动 类 型 的 行为 ， 请 访问 http:/easings.net。 














8.7 小 结 二 111 








当 反 转动 画 完成 之 后 ， 一 个 最 终 的 Velocity 调用 通过 用 2000 毫 秒 时 间 将 元 素 的 opacity 值 过 渡 
至 0, 使 元 素 淡 出 视图 。 这 使 演示 动画 结束 后 的 浏览 器 画布 与 开始 时 的 视觉 状态 一 致 : 一 干 二 净 、 
空空 如 也 ! 你 的 工作 也 就 到 此 结束 了 。 


8.7 小 结 


从 强制 给 值 到 值 函 数 ， 青 到 反 转 ， 这 个 演示 带 你 了 解 了 Velocity 动 画 引 擎 的 强大 功能 。 本 书 
的 重点 放 在 了 Velocity 身 上 ， 希望 本 章 过 后 你 会 确信 这 么 做 是 值得 的 。 使 用 不 足 75 行 的 代码 ， 就 
创造 了 不 同 于 以 往 见 到 的 纯 HTML 的 丰富 3D 场 景 ， 而 且 代 码 不 仅 简 洁 、 表 意 而 且 高 效 。 








这 个 例子 充分 反映 出 : 要 实现 看 似 复 杂 的 动画 其 实 很 简单 , 尤其 是 当 你 使 用 了 正确 的 工具 并 
遵循 了 最 佳 实践 。 我 的 希望 是 将 你 在 网 络 上 看 到 的 优美 动画 总 结 为 一 系列 容易 掌握 并 可 以 用 在 自 
己 动 效 设 计 中 的 原则 。 


现在 ,去 设计 一 些 美丽 的 网 站 和 应 用 吧 ! 一 旦 搞 出 了 什么 酷 炫 的 效果 ， 别 忘 了 在 Twitter 上 展 
示 给 我 看 : twitter.com/shapiro。 


要 继续 学 习 ， 
年 关注 


@shapiro。 








延展 阅读 


全 能 前 端 人 员 必 读 之 经 典 
全 面 知识 更 新 必 备 之 佳作 





(第 3 版 ) : 书号 : 978-7-115-27579-0 
ut 定价 : 99.00 元 





直面 当前 JavaScript 开发 者 不 求 甚 解 的 大 趋势 
2 meses 深入 理解 语言 内 部 的 机 制 
你 不 知道 的 ( 中 卷 和 下 卷 也 即将 问世 ) 


JavaScript :x 


SCOPEE CLOSURES 
| THIS & OBJECT PROTOTYPES 


re SA 


书号 : 978-7-115-38573-4 
定价 : 49.00 元 








着 重 介绍 DOM 编程 技术 背后 的 思路 和 原则 
释放 JavaScript 和 DOM 编程 的 惊人 潜力 
JavaScript DOM 

编程 艺术 (和 a 上) 


PN OQ ERSSSNEV Wa 


书号 : 978-7-115-24999-9 
定价 : 49.00 元 





腾讯 前 端 Alloy Team 团队 出 品 ， 资 深 前 端 工程 师 曾 探 力 作 
全 面 涵盖 专门 针对 JavaScript 的 16 个 设计 模式 
深入 剖析 面向 对 象 设计 原则 、 面 向 对 象 编程 技巧 及 代码 重 构 








全 而 基站 针对 JevaSorip 的 16 个 朗 讨 本 
ET 


书号 : 978-7-115-38888-9 
定价 : 59.00 元 





网 4 可 TabgH 和 8 


关注 图 灵 教育 关注 图 灵 社 区 
ITUring.cn 


在 线 出 版 电子 书 《 码 农 》 杂 志 图 灵 访谈 …… 


名 


QQ 联系 我 们 


| 


灵 读 者 官方 群 I: 218139230 
灵 读 者 官方 群 [: 164939616 


微 博 联系 我 们 














加 























官方 账号 ，@ 图 灵 教 育 @ 图 灵 社 区 @ 图 灵 新 知 
市 场合 作 : @ 图 灵 责 野 
写作 本 版 书 ，@ 图 灵 小 花 @ 图 灵 张 霞 
翻译 英文 书 : @ 朱 峙 ituring @ 楼 伟 珊 
翻译 日 文书 或 文章 ，@ 图 灵 乐 区 
翻译 韩文 书 ，@ 图 灵 陈 曦 

电子 书 合作 : @hi_jeanne 

图 灵 访 谈 /《 码 农 》 杂志 : @ 李 盼 ituring 
加 入 我 们 ，@ 王 子 是 好 人 


5 


微 信 联 系 我 们 







































































图 灵 教 育 图 灵 访 谈 


turingbooks ituring_interview 
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网 页 动画 设计 





“我 是 一 名 资深 的 前 端 开 发 人 员 ， 阅 读 过 的 相关 技术 书 已 经 记 不 清 有 多 少 
本 ,但 这 本 书 仍 让 我 眼前 一 亮 ， 受益 菲 浅 。 目 前 市 面 上 还 没有 其 他 书 论述 这 个 主 
题 ， 更 途 论 对 文本 动画 、 动 画工 作 流 、 动 画 性 能 等 问题 的 深入 讨论 ， 储 这 一 点 ， 
本 书 也 值 五 星 ! ” 


网 络 时 代 ， 用 户 体验 的 重要 性 毋庸 置疑 ， 动 画 在 这 一 过 程 中 的 重要 性 也 明显 
提升 。 如 何在 不 分 散 用 户 注意 的 情况 下 达到 动画 设计 加 强 页 面目 的 的 效果 ， 已 经 
成 为 优秀 的 用 户 界 面 设计 师 和 Web 开 发 人 员 孜 孜 以 求 的 目标 。 本 书 将 为 此 提供 必 
备 的 知识 。 

书 中 内 容 共 分 为 8 章 ， 以 作者 开发 的 动画 库 Velocity.js 为 工具 ， 简 明 扼 要 地 探 
讨 了 JavaScript 动 画 的 特点 和 工作 流 方面 的 优势 ， 涵 盖 开 发 者 们 最 关心 的 文本 动 
画 、SVG、 动 画 性 能 等 问题 。 掌 握 书 中 内 容 ， 即 可 自信 实现 视觉 上 效果 震撼 、 技 
术 上 易于 维护 的 动画 效果 。 
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看 完了 


如 果 您 对 本 书 内 容 有 疑问 ， 可 发 邮件 至 contact@turingbook.com， 会 有 编辑 或 作 
译 者 协助 答疑 。 也 可 访问 图 灵 社 区 ， 参 与 本 书 讨论 。 


如 果 是 有 关 电 子 书 的 建议 或 问题 ， 请 联系 专用 客服 邮箱 : 


ebook@turingbook.com。 
在 这 可 以 找到 我 们 : 


微 博 @ 图 灵 教育 : 好 书 、 活 动 每 日 播报 
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